Merge pull request #126 from pradipchaudhary/project95

pradipchaudhary · web-flow · commit 6d0bfad61708 · 2024-02-15T18:13:19.000+05:45
init app [project95]
diff --git a/95-Reducing DOM Manipulations/index.html b/95-Reducing DOM Manipulations/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="styles.css" />
+        <title>Reducing DOM Manipulations App</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Reducing DOM Manipulations App</h1>
+            <ul id="listContainer">
+                <!-- List items will be dynamically added here -->
+            </ul>
+            <button id="addItemBtn">Add Item</button>
+        </div>
+
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/95-Reducing DOM Manipulations/script.js b/95-Reducing DOM Manipulations/script.js
@@ -0,0 +1,20 @@
+// Function to add a new list item
+function addItem() {
+    const listContainer = document.getElementById("listContainer");
+    const newItem = document.createElement("li");
+    newItem.textContent = `Item ${listContainer.childElementCount + 1}`;
+
+    // Add event listener to the new item
+    newItem.addEventListener("click", handleItemClick);
+
+    // Append the new item to the list container
+    listContainer.appendChild(newItem);
+}
+
+// Function to handle item click (event delegation)
+function handleItemClick(event) {
+    alert(`You clicked on: ${event.target.textContent}`);
+}
+
+// Add event listener to the "Add Item" button
+document.getElementById("addItemBtn").addEventListener("click", addItem);
diff --git a/95-Reducing DOM Manipulations/styles.css b/95-Reducing DOM Manipulations/styles.css
@@ -0,0 +1,16 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    margin: 0;
+}
+
+.container {
+    text-align: center;
+}
+
+button {
+    padding: 5px 10px;
+}
