modified web form

maa17019 · Mar 22, 2021 · 4515331 · 4515331
1 parent 335291c
commit 4515331
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 1 deletion.
diff --git a/week-9/working-web-form/.DS_Store b/week-9/working-web-form/.DS_Store
diff --git a/week-9/working-web-form/fav/.DS_Store b/week-9/working-web-form/fav/.DS_Store
diff --git a/week-9/working-web-form/fav/favicon-16x16.png b/week-9/working-web-form/fav/favicon-16x16.png
diff --git a/week-9/working-web-form/fav/favicon-32x32.png b/week-9/working-web-form/fav/favicon-32x32.png
diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html
@@ -5,13 +5,18 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Web Form That Works</title>
+    <!-- Place favicon.ico in the root directory -->
+    <link rel="icon" type="image/png" href="fav/favicon-16x16.png">
+    <link rel="apple-touch-icon" href="fav/favicon-32x32.png">
+
     <link href="css/form.css" rel="stylesheet">
+
 </head>
 <body>
 
     <form action="https://formspree.io/f/mdoynapr" method="POST">
 
-        <h1>Web form that works!</h1>
+        <h1>Web form that works &#128512;</h1>
         <h4>*Fill in all fields</h2>
             <p>
               <label for="name"><span>Name:* </span></label> <!--Name-->

diff --git a/week-9/working-web-form/js/main.js b/week-9/working-web-form/js/main.js
@@ -1,3 +1,4 @@
+/*Retrieve form attributes*/
 let forms = document.querySelector("form");
 let namee = document.getElementById("name");
 let mail = document.getElementById("mail");
@@ -13,6 +14,7 @@ let warning = document.querySelector("#warning");
   message.value === ""
 ];*/
 
+/*Event listener for if no fields are filled in*/
 forms.addEventListener("submit", function (event) {
   if ((namee.value === "" || mail.value === "") && (subject.value === "" || message.value === "")){
     event.preventDefault();
@@ -22,21 +24,25 @@ forms.addEventListener("submit", function (event) {
     subject.style.borderColor = "red";
     message.style.borderColor = "red";
   }
+/*If NAME field is not filled in*/
 else if (namee.value === "") {
     event.preventDefault();
     warning.innerHTML = "You must fill in the NAME field!" ;
     //form.style.borderColor = "red";
     namee.style.borderColor = "red";
+/*If EMAIL field is not filled in*/
   } else if (mail.value === "") {
     event.preventDefault();
     warning.innerHTML = "You must fill in the EMAIL field!"; 
     //form.style.borderColor = "red";
     mail.style.borderColor = "red";
+/*If SUBJECT field is not filled in*/
   } else if (subject.value === "") {
     event.preventDefault();
     warning.innerHTML = "You must fill in the SUBJECT field!"; 
     //form.style.borderColor = "red";
     subject.style.borderColor = "red";
+/*If MESSAGE field is not filled in*/
   } else if (message.value === "") {
     event.preventDefault();
     warning.innerHTML = "You must fill in the MESSAGE field!";