Almost finished implementing guestbook; More consistency in cards

1 files changed, 56 insertions, 0 deletions

diff --git a/src/components/GuestbookForm.jsx b/src/components/GuestbookForm.jsx
new file mode 100644
index 0000000..aae5e10
--- /dev/null
+++ b/src/components/GuestbookForm.jsx
@@ -0,0 +1,56 @@
+import { h, Component } from 'preact';
+import { createMessage } from '../services/GuestbookService';
+
+class GuestbookForm extends Component {
+    state = {
+        name: '',
+        email: '',
+        website: '',
+        message: ''
+    };
+
+    handleChange = (e) => {
+        this.setState({ [e.target.name]: e.target.value });
+    }
+
+    handleSubmit = async (e) => {
+        e.preventDefault();
+        await createMessage(this.state);
+        this.setState({
+            name: '',
+            email: '',
+            website: '',
+            message: ''
+        });
+    }
+
+    render() {
+        return (
+            <form class="card" onSubmit={this.handleSubmit}>
+                <h2>Submit Message</h2>
+                <label>
+                    Name<br />
+                    <input type="text" name="name" placeholder="Name" required value={this.state.name} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Email Address<br />
+                    <input type="email" name="email" placeholder="Email Address (optional)" value={this.state.email} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Your Website<br />
+                    <input type="url" name="website" placeholder="https://example.com (optional)" value={this.state.website} onChange={this.handleChange} />
+                </label>
+                <br />
+                <label>
+                    Message<br />
+                    <textarea name="message" placeholder="Message (Up to 1000 characters)" required value={this.state.message} onChange={this.handleChange}></textarea>
+                </label>
+                <button type="submit">Send</button>
+            </form>
+        );
+    }
+}
+
+export default GuestbookForm;