diff --git a/week-9/working-web-form/.DS_Store b/week-9/working-web-form/.DS_Store index bb40e54..102d40f 100644 Binary files a/week-9/working-web-form/.DS_Store and b/week-9/working-web-form/.DS_Store differ diff --git a/week-9/working-web-form/fav/.DS_Store b/week-9/working-web-form/fav/.DS_Store new file mode 100644 index 0000000..ca86179 Binary files /dev/null and b/week-9/working-web-form/fav/.DS_Store differ diff --git a/week-9/working-web-form/fav/favicon-16x16.png b/week-9/working-web-form/fav/favicon-16x16.png new file mode 100755 index 0000000..d00cc50 Binary files /dev/null and b/week-9/working-web-form/fav/favicon-16x16.png differ diff --git a/week-9/working-web-form/fav/favicon-32x32.png b/week-9/working-web-form/fav/favicon-32x32.png new file mode 100755 index 0000000..99fa4bf Binary files /dev/null and b/week-9/working-web-form/fav/favicon-32x32.png differ diff --git a/week-9/working-web-form/index.html b/week-9/working-web-form/index.html index cfc6f32..8a66a7e 100644 --- a/week-9/working-web-form/index.html +++ b/week-9/working-web-form/index.html @@ -5,13 +5,18 @@ Web Form That Works + + + + +
-

Web form that works!

+

Web form that works 😀

*Fill in all fields

diff --git a/week-9/working-web-form/js/main.js b/week-9/working-web-form/js/main.js index b184648..519b1da 100644 --- 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!";