From 6b3059e524455039e1cab400c6db50de2a98b6cc Mon Sep 17 00:00:00 2001 From: Ishanvi Chauhan Date: Sun, 23 Feb 2025 14:59:50 +0530 Subject: [PATCH] Day 8 - Form events Friday 21022025 Work --- Day8/formEvents.css | 106 ++++++++++++++++++++++++++++++++++++++ Day8/formEvents.html | 37 +++++++++++++ Day8/formEvents.js | 120 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 263 insertions(+) create mode 100644 Day8/formEvents.css create mode 100644 Day8/formEvents.html create mode 100644 Day8/formEvents.js diff --git a/Day8/formEvents.css b/Day8/formEvents.css new file mode 100644 index 0000000..6ea21c4 --- /dev/null +++ b/Day8/formEvents.css @@ -0,0 +1,106 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +} +body{ + padding: 1rem; + display: flex; + flex-direction: column; +} + +form{ + display: flex; + flex-direction: row; + align-items: center; + margin: auto auto; + padding: 1rem; + width: auto; + gap: 10px; +} + +form input, select{ + padding: 10px; + border-radius: 5px; + border: 1px solid #ccc; + font-size: 16px; + height: 45px; +} +select{ + margin: 0 40px 0 40px; +} + +#root{ + display: flex; + flex-wrap: wrap; +} + +h2{ + text-align: center; + margin: 15px 0 15px 0; +} + +h5{ + color: #c00c4b; + font-size: 18px; + font-weight: bold; + text-align: center; + margin: 7px; +} + +h4{ + color: #703888; + font-size: 20px; + font-weight: bold; + text-align: center; + margin: 7px; +} +h6{ + color: #1a5188; + font-size: 14px; + font-weight: bold; + text-align: center; + margin: 7px; +} +p{ + color: #149054; + font-size: 16px; + font-weight: bold; + text-align: center; + margin: 7px; +} +.card{ + border-radius: 1rem; + box-shadow: 4px 4px 4px rgb(238, 237, 172); + width: 200px; + background-color: rgb(255, 254, 211); + margin: 1rem 1rem; + padding: 20px; + transition: .7s; + display: flex; + flex-direction: column; + width: 200px; +} +.card:hover{ + box-shadow: 0 0 20px rgb(192, 191, 110); + cursor: pointer; + width: 250px; +} +button{ + padding: 10px 20px; + border: none; + cursor: pointer; + border-radius: 5px; + transition: .4s; + background-color: #2A3335; + color: white; + box-shadow: 0 0 7px #686D76; + margin: 10px; + font-size: 17px; +} +button:hover{ + background-color: #686D76; + color: white; + box-shadow: 0 0 7px #2A3335; +} \ No newline at end of file diff --git a/Day8/formEvents.html b/Day8/formEvents.html new file mode 100644 index 0000000..5d90d2f --- /dev/null +++ b/Day8/formEvents.html @@ -0,0 +1,37 @@ + + + + + + Document + + + +

Add

+
+ + + + + +
+

Search

+ +

Details

+
+ +
+ + + \ No newline at end of file diff --git a/Day8/formEvents.js b/Day8/formEvents.js new file mode 100644 index 0000000..297fb92 --- /dev/null +++ b/Day8/formEvents.js @@ -0,0 +1,120 @@ +const data = [ + { id: '1', name: 'Ishanvi', email: 'ishanvi@gmail.com', city: 'Ghaziabad'}, + { id: '2', name: 'Kshitiz', email: 'kshitiz@gmail.com', city: 'Delhi'}, + { id: '3', name: 'Asmit', email: 'asmit@gmail.com', city: 'Kanpur'}, + { id: '4', name: 'Arpit', email: 'arpit@gmail.com', city: 'Jalaun'}, + { id: '5', name: 'Anisha', email: 'anisha@gmail.com', city: 'Ghaziabad'} +]; + +const root = document.getElementById("root"); + +// Perform the select option based on the cities and add new city in the option field + +const selectElement = document.getElementsByTagName("select")[0]; + +const showOptions = () => { + const selectedCity = selectElement.value; // Store the current selected value + selectElement.innerHTML = ""; // Clear existing options + + const citiesObj = {}; + data.forEach((elem) => { + citiesObj[elem.city] = true + }); + + console.log(data); + + const cities = Object.keys(citiesObj); + cities.forEach((city) => { + const newOption = document.createElement("option"); + newOption.value = city; + newOption.innerHTML = city; + selectElement.appendChild(newOption); + }); + + // Ensure the selected city remains the same after re-rendering options + if (cities.includes(selectedCity)) { + selectElement.value = selectedCity; + } else { + selectElement.value = cities[0]; // Set default to the first available city + } +} +//Display the card container in the browser +const showCards = (newData) => { + showOptions(); + root.innerHTML = ""; + newData.forEach((elem) => { + const card = document.createElement("div"); + card.className = "card"; + card.innerHTML = ` +
Id : ${elem.id}
+

${elem.name}

+
${elem.email}
+

${elem.city}

+ + `; + root.appendChild(card); + }) +} + +const deleteCard = (e, id) => { + // Delete the card container + //e.target.parentElement.remove(); + console.log(e, id); + e.target.parentElement.remove(); + data.forEach((elem, index) => { + if (elem.id == id) { + data.splice(index, 1); + console.log('===') + } + }) + showOptions() +} + + +// Based on select option display only the cards with city same as the selected city +const handleSelect = (e) => { + const selectedCity = e.target.value; + const newData = data.filter((elem) => { + if (elem.city == selectedCity) return true; + return false; + }) + showCards(newData); +} + +// Handle the form submit event +const handleFormSubmit = (e) => { + e.preventDefault(); + console.log(e); + const id = e.target.id.value; + const name = e.target.fullname.value; + const city = e.target.city.value; + const email = e.target.email.value; + console.log(id, name, email, city); + + + // Check if the email already exists then dont enter the data + const emailExists = data.find((elem) => { + if (elem.email == email) return true; + return false; + }) + + // Checking for the existence of the same email. If it exists then return from the function and alert the user + + if (emailExists) { + alert("Email already exists"); + return; + } + // Add the new element to the data array + const newElem = { + id: e.target.id.value, + name: e.target.fullname.value, + city: e.target.city.value, + email: e.target.email.value + } + data.push(newElem); + showCards(data); + alert("Data added successfully"); + e.target.reset(); +} + +showCards(data); \ No newline at end of file