done ayyaayayya

week-9/form.html

@@ -83,22 +83,72 @@ function actionForm()
     };
 
 
-const myForm = document.getElementById('myForm');
+const formDataToJson = formData => {
+      const entries = formData.entries();
 
-myForm.addEventListener('submit', function(e) {
-    e.preventDefault();
+      const dataObj = Array.from(entries).reduce( (data, [key, value]) => {
+        data[key] = value;
+        if (key === 'email') {
+          data._replyTo = value;
+        }
+        return data;
+      }, {});
+
+      return JSON.stringify(dataObj);
+    };
+
+    const toggleForm = bool => {
+      FORM_ELEMENT.reset();
+      if (bool) {
+        FORM_ELEMENT.style.display = 'block';
+        SUCCESS_ELEMENT.style.display = 'none';
+      }
+      else {
+        FORM_ELEMENT.style.display = 'none';
+        SUCCESS_ELEMENT.style.display = 'block';
+      }
+    }
+const YOUR_FORMSPREE_EMAIL = 'mtompkins09@yahoo.com';
+
+const FORMSPREE_POST_URL = `https://formspree.io/mgezqgzj${ YOUR_FORMSPREE_EMAIL }`;
+
+const FORM_ELEMENT = document.getElementById('myForm');
 
-    const formData = new FormData(this);
+const SUCCESS_ELEMENT = document.getElementById('my-form-status');
 
-    fetch("https://formspree.io/mgezqgzj", {
-      method: 'POST',
-      headers: {'Content-Type': 'application/x-www-form-url-encoded', 'Accept': 'application/json'},
-      body: formData
-    })
-    .then(response => console.log(response))
-    .catch(error => console.log(error))
-});
+    FORM_ELEMENT.addEventListener('submit', function (e) {
+      e.preventDefault();
+
+      const formData = new FormData(this);
 
+      formData.append('_subject', 'Submission In Your Face');
+
+
+      fetch("https://formspree.io/mgezqgzj", {
+        method: 'POST',
+        body: formDataToJson(formData),
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+        .catch(e => {
+
+        })
+        .then(r => r.json())
+        .then(response => {
+
+          if (response.success === 'email sent') {
+            console.log(response);
+            toggleForm();
+          }
+          else {
+
+          }          
+        });
+
+    });
+
+