From 3a9802b2d675ad75f644b3d6e6b7ada3223595dc Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 15:36:14 -0600
Subject: [PATCH 1/7] Done

---
 index.html   |  16 ++++++++
 sendEmail.js | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css    |  68 ++++++++++++++++++++++++++++++++
 3 files changed, 193 insertions(+)

diff --git a/index.html b/index.html
index c78554d..772ad71 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>Form Styling</title>
+    <link rel="stylesheet" href="style.css">
     <link
       href="https://fonts.googleapis.com/css?family=Raleway"
       rel="stylesheet"
@@ -19,24 +20,30 @@ <h1>Sign Up</h1>
           <div class="form-group">
             <label for="first-name">First Name</label>
             <input type="text" name="firstName" id="first-name" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="last-name">Last Name</label>
             <input type="text" name="lastName" id="last-name" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="email">Email</label>
             <input type="email" name="email" id="email" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="password">Password</label>
             <input type="password" name="password" id="password" />
+            <span></span>
           </div>
           <div class="form-group">
             <label for="password2">Confirm Password</label>
             <input type="password" name="pasword2" id="password2" />
+            <span></span>
           </div>
           <button type="submit" class="btn">Sign Up</button>
+          <span id="success"></span>
           <p class="bottom-text">
             By clicking the Sign Up button, you agree to our
             <a href="#">Terms & Conditions</a> and
@@ -48,5 +55,14 @@ <h1>Sign Up</h1>
         <p>Already have an account? <a href="#">Login Here</a></p>
       </footer>
     </div>
+    <script src="sendEmail.js"></script>
+
+    <script type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js">
+    </script>
+
+    <script type="text/javascript">
+      emailjs.init('user_RKLb3tmLVxATwmQH3mZ6c')
+    </script>
   </body>
 </html>
diff --git a/sendEmail.js b/sendEmail.js
index bdd9b13..f18ffbf 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -4,3 +4,112 @@
 
 // Let the user know if the passwords to not match
 // Also let the user know when the email has been successfully sent
+
+let fname;
+let lname;
+let email;
+let pwd;
+let pwdc;
+let form;
+let inputArr;
+let btn;
+let errMap;
+
+function main()
+{
+    console.log("Loaded!");
+
+    form = document.querySelector("form");
+    // console.log(form);
+
+    fname = form.children[0].children[1];
+    lname = form.children[1].children[1];
+    email = form.children[2].children[1];
+    pwd = form.children[3].children[1];
+    pwdc = form.children[4].children[1];
+    btn = form.children[5];
+    btn.nextElementSibling.innerHTML = "";
+
+    inputArr = [fname, lname, email, pwd, pwdc];
+
+    errMap = new Map();
+    errMap.set(fname, "Please enter a first name!");
+    errMap.set(lname, "Please enter a last name!");
+    errMap.set(email, "Please enter an email!");
+    errMap.set(pwd, "Please enter a password!");
+    errMap.set(pwdc, "Please confirm your password!");
+
+    inputArr.forEach(item=> console.log(item.value));
+}
+
+function anyFieldsEmpty()
+{
+    return inputArr.some(item=> 
+        {
+            if (item.value === "")
+            {
+                item.nextElementSibling.innerHTML = errMap.get(item);
+                return true;
+            }
+            else
+            {
+                item.nextElementSibling.innerHTML = "";
+                return false;
+            }
+        });
+}
+
+function checkEmail()
+{
+    // The following comes from: https://stackoverflow.com/questions/46155/how-to-validate-an-email-address-in-javascript
+    var re = /^\S+@\S+\.\S+$/;
+    return !re.test(email.value);
+}
+
+document.addEventListener("DOMContentLoaded", main);
+
+document.querySelector(".btn").addEventListener("click", evt =>
+{
+    evt.preventDefault();
+    if (anyFieldsEmpty())
+    {
+        // console.log("One is empty!");
+        // inputArr.forEach(item=> console.log(item.value));
+        // alert("Please fill in all fields!");
+    }
+    else if (checkEmail())
+    {
+        // alert("Please enter a valid email!");
+        email.nextElementSibling.innerHTML = "Please enter a valid email address!";
+    }
+    else if (pwd.value !== pwdc.value)
+    {
+        // alert("Passwords do not match!");
+        pwdc.nextElementSibling.innerHTML = "Passwords do not match!";
+    }
+    else
+    {
+        // console.log("All are filled!");
+        // inputArr.forEach(item=> console.log(item.value));
+
+        btn.innerHTML = 'Sending...';
+
+        fname.name = "to_name";
+        email.name = "to_email";
+
+        const serviceID = 'default_service';
+        const templateID = 'template_qp43uzb';
+
+        // console.log(form);
+
+        emailjs.sendForm(serviceID, templateID, form)
+            .then(() => {
+            btn.innerHTML = 'Sign Up';
+            // alert('Sent!');
+            btn.nextElementSibling.innerHTML = "Signed Up Successfully!";
+            }, (err) => {
+            btn.innerHTML = 'Whoops!';
+            alert(JSON.stringify(err));
+            });
+            }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 80ef8c1..ba6efea 100644
--- a/style.css
+++ b/style.css
@@ -3,18 +3,39 @@
     -May want to add "border-box for "box-sizing so padding does not affect width
     -Reset margin and padding 
    */
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   font-family: sans-serif;
+   font-weight: 300;
+  }
+
+  span
+  {
+    color: rgb(165, 27, 27);
+    font-weight: bolder;
+    padding: 5px;
+    display: block;
+  }
+
+  span#success
+  {
+    color: seagreen;
+    text-align: center;
   }
 
   body {
     /* 
       -Background color is #344a72
     */
+    background-color: #344a72;
   }
 
   a {
     /* 
     Underlined links are ugly :)
    */
+   text-decoration: none;
   }
 
   #container {
@@ -23,12 +44,18 @@
     -I would also set a "max-width" for responsiveness
     -May want to add some padding
     */
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 2rem;
   }
 
   .form-wrap {
     /* 
       This is the white area around the form and heading, etc
     */
+    background-color: white;
+    padding: 15px 25px;
   }
 
   .form-wrap h1,
@@ -36,24 +63,47 @@
     /* 
       May want to center these
     */
+    text-align: center;
+    color: gray;
+    padding: 0px 0px 10px;
+  }
+
+  .form-wrap h1 {
+    color: rgb(85, 85, 85);
+    font-weight: 500;
+    /* font-weight: bold; */
   }
 
   .form-wrap .form-group {
     /* 
       Each label, input is wrapped in .form-group
     */
+    /* display: flex; */
+    padding: 5px 0px;
   }
 
   .form-wrap .form-group label {
     /* 
       Label should be turned into a block element
     */
+    color: gray;
+    display: block;
+    /* filter: brightness(.1); */
+    padding: 5px 5px 5px 0px;
+    /* font-weight: bold; */
   }
 
   .form-wrap .form-group input {
     /* 
       Inputs should reach accross the .form-wrap 100% and have some padding
     */
+    /* flex: 1; */
+    /* color: rgb(235, 235, 235); */
+    width: 100%;
+    padding: .75em;
+    /* border-color: rgb(235, 235, 235); */
+    border: 1px solid rgb(216, 216, 216);
+    border-radius: 5px;
   }
 
   .form-wrap button {
@@ -61,28 +111,46 @@
       Button should wrap accross 100% and display as block
       Background color for button is #49c1a2
     */
+    display: block;
+    width: 100%;
+    color: white;
+    background-color: #49c1a2;
+    padding: 10px;
+    margin: 10px 0px 0px;
+    /* margin: auto; */
+    border-style: none;
   }
 
   .form-wrap button:hover {
     /* 
       Hover background color for button is #37a08e
     */
+    background-color: #37a08e;
   }
 
   .form-wrap .bottom-text {
     /* 
       Bottom text is smaller
     */
+    font-size: 0.8em;
+    text-align: center;
+    color: gray;
+    line-height: 1.5rem;
+    padding: 20px 0px 0px;
   }
 
   footer {
     /* 
     Should be centered
    */
+   color: white;
+   text-align: center;
+   padding: 10px 0px 0px;
   }
 
   footer a {
     /* 
       Footer link color is #49c1a2
     */
+    color: #49c1a2;
   }
\ No newline at end of file

From a1bab20cc8443ed9a9d45ee904de46ec74a803c0 Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 15:48:03 -0600
Subject: [PATCH 2/7] Cleaned up code

---
 sendEmail.js | 38 +++++++++-----------------------------
 1 file changed, 9 insertions(+), 29 deletions(-)

diff --git a/sendEmail.js b/sendEmail.js
index f18ffbf..cb9a389 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -17,10 +17,7 @@ let errMap;
 
 function main()
 {
-    console.log("Loaded!");
-
     form = document.querySelector("form");
-    // console.log(form);
 
     fname = form.children[0].children[1];
     lname = form.children[1].children[1];
@@ -32,31 +29,21 @@ function main()
 
     inputArr = [fname, lname, email, pwd, pwdc];
 
+    inputArr.forEach(item=>{
+        item.addEventListener("input", evt=> evt.target.nextElementSibling.innerHTML = "")
+    });
+
     errMap = new Map();
     errMap.set(fname, "Please enter a first name!");
     errMap.set(lname, "Please enter a last name!");
     errMap.set(email, "Please enter an email!");
     errMap.set(pwd, "Please enter a password!");
     errMap.set(pwdc, "Please confirm your password!");
-
-    inputArr.forEach(item=> console.log(item.value));
 }
 
 function anyFieldsEmpty()
 {
-    return inputArr.some(item=> 
-        {
-            if (item.value === "")
-            {
-                item.nextElementSibling.innerHTML = errMap.get(item);
-                return true;
-            }
-            else
-            {
-                item.nextElementSibling.innerHTML = "";
-                return false;
-            }
-        });
+    return inputArr.some(item=> item.value === "");
 }
 
 function checkEmail()
@@ -73,25 +60,21 @@ document.querySelector(".btn").addEventListener("click", evt =>
     evt.preventDefault();
     if (anyFieldsEmpty())
     {
-        // console.log("One is empty!");
-        // inputArr.forEach(item=> console.log(item.value));
-        // alert("Please fill in all fields!");
+        inputArr.forEach(item=> {
+                if (item.value === "") item.nextElementSibling.innerHTML = errMap.get(item);
+                else item.nextElementSibling.innerHTML = "";
+        });
     }
     else if (checkEmail())
     {
-        // alert("Please enter a valid email!");
         email.nextElementSibling.innerHTML = "Please enter a valid email address!";
     }
     else if (pwd.value !== pwdc.value)
     {
-        // alert("Passwords do not match!");
         pwdc.nextElementSibling.innerHTML = "Passwords do not match!";
     }
     else
     {
-        // console.log("All are filled!");
-        // inputArr.forEach(item=> console.log(item.value));
-
         btn.innerHTML = 'Sending...';
 
         fname.name = "to_name";
@@ -100,12 +83,9 @@ document.querySelector(".btn").addEventListener("click", evt =>
         const serviceID = 'default_service';
         const templateID = 'template_qp43uzb';
 
-        // console.log(form);
-
         emailjs.sendForm(serviceID, templateID, form)
             .then(() => {
             btn.innerHTML = 'Sign Up';
-            // alert('Sent!');
             btn.nextElementSibling.innerHTML = "Signed Up Successfully!";
             }, (err) => {
             btn.innerHTML = 'Whoops!';

From daef7499e61b3f24d019e404aac581ff4398250b Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 15:52:14 -0600
Subject: [PATCH 3/7] Ensured error messages always cleared out

---
 sendEmail.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/sendEmail.js b/sendEmail.js
index cb9a389..3de91d6 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -75,7 +75,11 @@ document.querySelector(".btn").addEventListener("click", evt =>
     }
     else
     {
-        btn.innerHTML = 'Sending...';
+        // This is the only error message that can be "corrected" by changing another input field,
+        // and so we need this hard-coded here to cover all cases
+        pwdc.nextElementSibling.innerHTML = "";
+
+        btn.innerHTML = 'Creating Account...';
 
         fname.name = "to_name";
         email.name = "to_email";
@@ -85,7 +89,7 @@ document.querySelector(".btn").addEventListener("click", evt =>
 
         emailjs.sendForm(serviceID, templateID, form)
             .then(() => {
-            btn.innerHTML = 'Sign Up';
+            btn.innerHTML = 'Email Sent!';
             btn.nextElementSibling.innerHTML = "Signed Up Successfully!";
             }, (err) => {
             btn.innerHTML = 'Whoops!';

From 0a2fadb22f99db1c9d73b997d189242fc046fc94 Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 15:59:18 -0600
Subject: [PATCH 4/7] Cleaned up CSS

---
 style.css | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/style.css b/style.css
index ba6efea..5221ece 100644
--- a/style.css
+++ b/style.css
@@ -3,6 +3,7 @@
     -May want to add "border-box for "box-sizing so padding does not affect width
     -Reset margin and padding 
    */
+   
    box-sizing: border-box;
    margin: 0;
    padding: 0;
@@ -10,6 +11,7 @@
    font-weight: 300;
   }
 
+  /* This is for all error or system messages */
   span
   {
     color: rgb(165, 27, 27);
@@ -18,6 +20,7 @@
     display: block;
   }
 
+  /* This will be specifically for the "success" message */
   span#success
   {
     color: seagreen;
@@ -28,6 +31,7 @@
     /* 
       -Background color is #344a72
     */
+
     background-color: #344a72;
   }
 
@@ -35,6 +39,7 @@
     /* 
     Underlined links are ugly :)
    */
+
    text-decoration: none;
   }
 
@@ -44,6 +49,7 @@
     -I would also set a "max-width" for responsiveness
     -May want to add some padding
     */
+
     max-width: 400px;
     margin-left: auto;
     margin-right: auto;
@@ -54,6 +60,7 @@
     /* 
       This is the white area around the form and heading, etc
     */
+
     background-color: white;
     padding: 15px 25px;
   }
@@ -63,22 +70,23 @@
     /* 
       May want to center these
     */
+
     text-align: center;
     color: gray;
     padding: 0px 0px 10px;
   }
 
+  /* I wanted this text to be slightly "darker" than the rest of the text */
   .form-wrap h1 {
     color: rgb(85, 85, 85);
     font-weight: 500;
-    /* font-weight: bold; */
   }
 
   .form-wrap .form-group {
     /* 
       Each label, input is wrapped in .form-group
     */
-    /* display: flex; */
+    
     padding: 5px 0px;
   }
 
@@ -86,22 +94,19 @@
     /* 
       Label should be turned into a block element
     */
+
     color: gray;
     display: block;
-    /* filter: brightness(.1); */
     padding: 5px 5px 5px 0px;
-    /* font-weight: bold; */
   }
 
   .form-wrap .form-group input {
     /* 
       Inputs should reach accross the .form-wrap 100% and have some padding
     */
-    /* flex: 1; */
-    /* color: rgb(235, 235, 235); */
+
     width: 100%;
     padding: .75em;
-    /* border-color: rgb(235, 235, 235); */
     border: 1px solid rgb(216, 216, 216);
     border-radius: 5px;
   }
@@ -111,13 +116,13 @@
       Button should wrap accross 100% and display as block
       Background color for button is #49c1a2
     */
+
     display: block;
     width: 100%;
     color: white;
     background-color: #49c1a2;
     padding: 10px;
     margin: 10px 0px 0px;
-    /* margin: auto; */
     border-style: none;
   }
 
@@ -125,6 +130,7 @@
     /* 
       Hover background color for button is #37a08e
     */
+
     background-color: #37a08e;
   }
 
@@ -132,6 +138,7 @@
     /* 
       Bottom text is smaller
     */
+
     font-size: 0.8em;
     text-align: center;
     color: gray;
@@ -143,6 +150,7 @@
     /* 
     Should be centered
    */
+
    color: white;
    text-align: center;
    padding: 10px 0px 0px;
@@ -152,5 +160,6 @@
     /* 
       Footer link color is #49c1a2
     */
+
     color: #49c1a2;
   }
\ No newline at end of file

From 573abade7a4c71deb3744219b96404a123a2ccb0 Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 16:20:42 -0600
Subject: [PATCH 5/7] Reworked email error when given invalid email

---
 sendEmail.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/sendEmail.js b/sendEmail.js
index 3de91d6..83c6c27 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -62,7 +62,6 @@ document.querySelector(".btn").addEventListener("click", evt =>
     {
         inputArr.forEach(item=> {
                 if (item.value === "") item.nextElementSibling.innerHTML = errMap.get(item);
-                else item.nextElementSibling.innerHTML = "";
         });
     }
     else if (checkEmail())
@@ -92,8 +91,8 @@ document.querySelector(".btn").addEventListener("click", evt =>
             btn.innerHTML = 'Email Sent!';
             btn.nextElementSibling.innerHTML = "Signed Up Successfully!";
             }, (err) => {
-            btn.innerHTML = 'Whoops!';
-            alert(JSON.stringify(err));
+                email.nextElementSibling.innerHTML = "Please enter a valid email address!";
+                btn.innerHTML = "Sign Up";
             });
-            }
+        }
 });
\ No newline at end of file

From 427da89fbdfe13aabb7c4615ff6fe50e84ecea76 Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 16:24:16 -0600
Subject: [PATCH 6/7] Removed redundant line

---
 sendEmail.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/sendEmail.js b/sendEmail.js
index 83c6c27..17c4933 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -25,7 +25,6 @@ function main()
     pwd = form.children[3].children[1];
     pwdc = form.children[4].children[1];
     btn = form.children[5];
-    btn.nextElementSibling.innerHTML = "";
 
     inputArr = [fname, lname, email, pwd, pwdc];
 

From 5e9558b00423c1ca8034b44b4f8cea123609e23b Mon Sep 17 00:00:00 2001
From: PatoGMTP <93350228+PatoGMTP@users.noreply.github.com>
Date: Mon, 15 Nov 2021 16:27:43 -0600
Subject: [PATCH 7/7] Final change

---
 sendEmail.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/sendEmail.js b/sendEmail.js
index 17c4933..08e5bfc 100644
--- a/sendEmail.js
+++ b/sendEmail.js
@@ -57,6 +57,8 @@ document.addEventListener("DOMContentLoaded", main);
 document.querySelector(".btn").addEventListener("click", evt =>
 {
     evt.preventDefault();
+    btn.nextElementSibling.innerHTML = "";
+
     if (anyFieldsEmpty())
     {
         inputArr.forEach(item=> {