Add "From" and "To" input fields

helenclx · Jan 26, 2024 · b9202d2 · b9202d2
1 parent 0fcfeef
commit b9202d2
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/m3-we-are-the-champions/index.html b/m3-we-are-the-champions/index.html
@@ -20,8 +20,15 @@ <h1>We are the Champions</h1>
 
         <form class="form">
             <label for="message-input" class="sr-only">Enter Your Endorsement:</label>
-            <input type="text" name="endorsement" id="message-input" class="form__message" placeholder="Write your endorsement here">
-            <button type="button" class="form__btn">Publish</button>
+            <input type="text" name="message" id="message-input" class="form__message" placeholder="Write your endorsement here" required>
+
+            <label for="from-input" class="sr-only">From:</label>
+            <input type="text" name="from" id="from-input" class="form__name" placeholder="From" required>
+
+            <label for="from-input" class="sr-only">To:</label>
+            <input type="text" name="to" id="to-input" class="form__name" placeholder="To" required>
+
+            <button type="submit" class="form__btn">Publish</button>
         </form>
 
         <section class="endorsements">

diff --git a/m3-we-are-the-champions/script.js b/m3-we-are-the-champions/script.js
@@ -11,23 +11,41 @@ const endorsementsInDB = ref(database, "endorsements");
 
 const formEl = document.querySelector('.form');
 const msgInputEl = document.querySelector('#message-input');
+const fromInputEl = document.querySelector('#from-input');
+const toInputEl = document.querySelector('#to-input');
 const publishBtn = document.querySelector('.form__btn');
 const endorsementsEl = document.querySelector('.endorsements');
 
-publishBtn.addEventListener('click', () => {
-    addEndorsement(msgInputEl.value);
+let endorsementObj = {
+    from: '',
+    to: '',
+    message: ''
+};
+
+publishBtn.addEventListener('click', (e) => {
+    e.preventDefault();
+    addEndorsement();
     clearInputEl();
 });
 
-formEl.addEventListener('submit', () => {
-    addEndorsement(msgInputEl.value);
+formEl.addEventListener('submit', (e) => {
+    e.preventDefault();
+    addEndorsement();
     clearInputEl();
 });
 
-const addEndorsement = (input) => {
-    push(endorsementsInDB, input);
+const addEndorsement = () => {
+    endorsementObj = {
+        from: fromInputEl.value,
+        to: toInputEl.value,
+        message: msgInputEl.value
+    }
+    console.log(endorsementObj);
+    push(endorsementsInDB, endorsementObj);
 };
 
 const clearInputEl = () => {
     msgInputEl.value = '';
+    fromInputEl.value = '';
+    toInputEl.value = '';
 };