From adba42c0906a4bd44cd336edceb1aed3b85e7513 Mon Sep 17 00:00:00 2001 From: kchia Date: Sat, 16 Oct 2021 18:35:06 -0400 Subject: [PATCH] remove solutions --- dom-manipulation/exercise/script.js | 20 --------------- event-handling/exercise/script.js | 8 ------ forms/index.html | 12 ++------- forms/script.js | 40 ++--------------------------- 4 files changed, 4 insertions(+), 76 deletions(-) diff --git a/dom-manipulation/exercise/script.js b/dom-manipulation/exercise/script.js index 57ed55a..543dc33 100644 --- a/dom-manipulation/exercise/script.js +++ b/dom-manipulation/exercise/script.js @@ -69,23 +69,3 @@ const countries = [ // Use a li to display the country. // Add an img to each country to display the flag of each country. // Append each country to the correct part of the DOM (e.g., Germany should be added to the Europe list since it's part of Europe, whereas Japan should be added to Asia) - -const asiaList = document.querySelector(".asia"); -const europeList = document.querySelector(".europe"); - -for (let i = 0; i < countries.length; i++) { - const country = countries[i]; - const countryListItem = document.createElement("li"); - const countryName = document.createTextNode( - `${country.name} (${country.code})` - ); - const countryFlagImage = document.createElement("img"); - countryFlagImage.setAttribute("src", country.flagImageUrl); - - countryListItem.appendChild(countryName); - countryListItem.appendChild(countryFlagImage); - - (country.region === "Asia" ? asiaList : europeList).appendChild( - countryListItem - ); -} diff --git a/event-handling/exercise/script.js b/event-handling/exercise/script.js index 026a31a..da95a59 100644 --- a/event-handling/exercise/script.js +++ b/event-handling/exercise/script.js @@ -4,11 +4,3 @@ https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset */ - -const container = document.querySelector(".container"); - -function handleButtonClick(event) { - container.style.backgroundColor = event.target.dataset.color; -} - -container.addEventListener("click", handleButtonClick); diff --git a/forms/index.html b/forms/index.html index 569c767..c9887ef 100644 --- a/forms/index.html +++ b/forms/index.html @@ -72,14 +72,7 @@

Conference Signup Form

- - +
@@ -142,7 +135,7 @@

Conference Signup Form

- @@ -155,7 +148,6 @@

Conference Signup Form

 -
diff --git a/forms/script.js b/forms/script.js index b1b8960..b99514a 100644 --- a/forms/script.js +++ b/forms/script.js @@ -20,16 +20,12 @@ const signupForm = document.querySelector(".signup-form"); const addressInput = document.querySelector("#address-line-1"); -const topicSelect = document.querySelector("#topic"); const otherInterestsTextArea = document.querySelector("#other-interests"); -const emailInput = document.querySelector("#email"); const addressError = document.querySelector("#address-line-1 + span.error"); -const topicError = document.querySelector("#topic + span.error"); const otherInterestsError = document.querySelector( "#other-interests + span.error" ); -const emailError = document.querySelector("#email + span.error"); /** EVENT HANDLERS @@ -38,16 +34,9 @@ function handleSignupFormSubmit(event) { event.preventDefault(); !addressInput.validity.valid && handleAddressInput(); - !topicSelect.validity.valid && handleTopicSelectInput(); - !emailInput.validity.valid && handleEmailInput(); !otherInterestsTextArea.validity.valid && handleOtherInterestsTextAreaInput(); - if ( - addressInput.validity.valid && - topicSelect.validity.valid && - otherInterestsTextArea.validity.valid && - emailInput.validity.valid - ) { + if (addressInput.validity.valid && otherInterestsTextArea.validity.valid) { // send form data } } @@ -60,13 +49,7 @@ function handleAddressInput() { : ""; } -// Use JavaScript to display an error message "You must select a topic" below to the -// Topic dropdown menu if the option selected is "Select One" -function handleTopicSelectInput() { - topicError.textContent = topicSelect.validity.valueMissing - ? "You must select a topic" - : ""; -} +// EXERCISE 1: Use JavaScript to display an error message "You must select a topic" below to the Topic dropdown menu if the option selected is "Select One" // Use JavaScript to display an error message below the text area if the content is // less than 10 characters long when the user submits the form. Your error message @@ -103,30 +86,11 @@ function handleOtherInterestsTextAreaInput(event) { - If the provided input is too short, display the following error message: "Email should be at least 6 characters but you entered {X} characters." - Perform the validation as the user is typing into the input field (meaning you should use the "input" event), as well as, when the user submits the form. */ -function handleEmailInput() { - const emailValidity = emailInput.validity; - - if (emailValidity.valid) { - emailError.textContent = ""; - emailError.classList.add("error"); - } else { - if (emailValidity.valueMissing) { - emailError.textContent = "You need to provide an e-mail address."; - } else if (emailValidity.typeMismatch) { - emailError.textContent = "Please enter a valid e-mail address."; - } else if (emailValidity.tooShort) { - emailError.textContent = `Email should be at least ${emailInput.minLength} characters but you entered ${emailInput.value.length}.`; - } - emailError.classList.add(["error", "active"]); - } -} /** REGISTER EVENT LISTENERS */ addressInput.addEventListener("input", handleAddressInput); -emailInput.addEventListener("input", handleEmailInput); -topicSelect.addEventListener("input", handleTopicSelectInput); otherInterestsTextArea.addEventListener( "input", handleOtherInterestsTextAreaInput