Day 8 - Form events

Friday 21022025 Work
IshanviChauhan · Feb 23, 2025 · 6b3059e · 6b3059e
1 parent 41fd892
commit 6b3059e
Show file tree

Hide file tree

Showing 3 changed files with 263 additions and 0 deletions.
diff --git a/Day8/formEvents.css 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;
+}
diff --git a/Day8/formEvents.html b/Day8/formEvents.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="./formEvents.css">
+</head>
+<body>
+    <h2>Add</h2>
+    <form onsubmit="handleFormSubmit(event)">
+        <input type="number" placeholder="Enter your id" name="id" required>
+        <input type="text"  placeholder="Enter your email" name="email" required>
+        <input type="text"  placeholder="Enter your name" name="fullname" required>
+        <input type="text"  placeholder="Enter your city" name="city" required>
+        <button>Add</button>
+    </form>
+    <h2>Search</h2>
+    <select onchange="handleSelect(event)">
+        <!-- <option value="Delhi">Delhi</option>
+        <option value="Noida">Noida</option>
+        <option value="Mumbai">Mumbai</option> -->
+    </select>
+    <h2>Details</h2>
+    <div id="root">
+        <!-- 
+        <div class="card">
+            <h5>Id</h5>
+            <h4>Name</h4>
+            <h6>Email</h6>
+            <p>City</p>
+        </div> 
+        -->
+    </div>
+    <script src="./formEvents.js"></script>
+</body>
+</html>
diff --git a/Day8/formEvents.js b/Day8/formEvents.js
@@ -0,0 +1,120 @@
+const data = [
+    { id: '1', name: 'Ishanvi', email: '[email protected]', city: 'Ghaziabad'},
+    { id: '2', name: 'Kshitiz', email: '[email protected]', city: 'Delhi'},
+    { id: '3', name: 'Asmit', email: '[email protected]', city: 'Kanpur'},
+    { id: '4', name: 'Arpit', email: '[email protected]', city: 'Jalaun'},
+    { id: '5', name: 'Anisha', email: '[email protected]', 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 = `
+        <h5>Id : ${elem.id}</h5>
+        <h4>${elem.name}</h4>
+        <h6>${elem.email}</h6>
+        <p>${elem.city}</p>
+        <button onclick="deleteCard(event,'${elem.id}')">Delete</button>
+        `;
+        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);