<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
<style>
body {
background-color: black;
color: white;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState } = React;
function ChatApp() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [name, setName] = useState('');
const sendMessage = async () => {
if (input.trim() !== '') {
const newMessage = { text: input, sender: name };
// Add to the front-end
setMessages([...messages, newMessage]);
// Send to the Google Apps Script backend
await fetch('/appscript_url_here', {
method: 'POST',
body: JSON.stringify(newMessage),
headers: {
'Content-Type': 'application/json',
},
});
setInput('');
}
};
return (
<div>
<h1>Enter Your Name</h1>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Your Name"
/>
<div>
{messages.map((msg, index) => (
<div key={index}>
<strong>{msg.sender}</strong>: {msg.text}
</div>
))}
</div>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Type a message..."
/>
<button onClick={sendMessage}>Send</button>
</div>
);
}
ReactDOM.render(<ChatApp />, document.getElementById('root'));
</script>
</body>
</html>