add js and complete To Do list Function

KASRA10 · KASRA10 · commit 9713feb6c105 · 2025-08-31T01:24:18.000+03:30
diff --git a/Mini ToDoList App Page/css/responsive.css b/Mini ToDoList App Page/css/responsive.css
@@ -1,5 +1,14 @@
-@media (max-width: 768px) {
+@media (max-width: 920px) {
   div.container {
     width: 90%;
   }
+
+  div.container h1 {
+    font-size: 1.5rem;
+  }
+
+  div.container div.form-area {
+    flex-flow: column wrap;
+    gap: 0px;
+  }
 }
diff --git a/Mini ToDoList App Page/css/style.css b/Mini ToDoList App Page/css/style.css
@@ -22,6 +22,7 @@ html {
 
 body {
   font-family: var(--primary-font), sans-serif;
+  text-transform: capitalize;
   background-color: var(--white-color);
   height: 100vh;
   display: flex;
@@ -38,6 +39,33 @@ body {
   box-sizing: border-box;
 }
 
+ul {
+  list-style-type: none;
+}
+
+ol#to-do-list {
+  width: 80%;
+  font-family: inherit;
+  list-style-position: inside;
+}
+
+ol#to-do-list li {
+  width: 100%;
+  height: 30px;
+  line-height: 30px;
+  background-color: var(--dark-color);
+  color: var(--secondary-color);
+  border-radius: var(--default-radius);
+  padding: 0 15px;
+  margin: 15px auto;
+  cursor: pointer;
+}
+
+ol#to-do-list li:hover {
+  background-color: var(--secondary-color);
+  color: var(--dark-color);
+}
+
 img {
   width: 100%;
 }
@@ -55,6 +83,13 @@ button {
 }
 
 /* PublicItems */
+hr {
+  background-color: var(--dark-color);
+  height: 0.4rem;
+  border-radius: var(--default-radius);
+  width: 80%;
+  margin: 15px auto;
+}
 button a.button {
   display: block;
   padding: 1rem 3.5rem;
@@ -104,5 +139,53 @@ div.container {
   background-color: white;
   border-radius: var(--default-radius);
   box-shadow: 3px 6px 10px 3px rgba(0, 0, 0, 0.15);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1rem;
+  overflow-y: auto;
+}
+
+div.container h1 {
+  color: var(--dark-color);
+  text-align: center;
+  margin: 15px;
+}
+
+div.container h1::first-letter {
+  color: var(--primary-color);
+}
+
+div.container h1 + em {
+  display: block;
+  text-align: center;
+  color: var(--dark-color);
+}
+
+div.container h1 + em::first-letter {
+  color: var(--primary-color);
+}
+
+div.container div.form-area {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+div.container div.form-area input[type="text"]#input {
+  background-color: var(--dark-color);
+  padding: 1rem 3.5rem;
+  margin: 1rem auto;
+  border-radius: var(--default-radius);
+  font-size: 18px;
+  color: var(--secondary-color);
+}
+
+div.container div.form-area input[type="text"]#input::placeholder {
+  color: var(--secondary-color);
+  opacity: 0.5;
 }
 /* End Of Body */
diff --git a/Mini ToDoList App Page/index.html b/Mini ToDoList App Page/index.html
@@ -47,8 +47,17 @@
     <title>Mini ToDoList App Page</title>
   </head>
   <body>
-    <div class="container"></div>
-    <button><a href="#" class="button">Test Button</a></button>
+    <div class="container">
+      <h1>Simple JS To Do List For You</h1>
+      <em>Double Click To Remove A Task</em>
+      <hr />
+      <div class="form-area">
+        <input type="text" placeholder="New Task..." id="input" />
+        <button id="button"><a href="#" class="button">Test Button</a></button>
+      </div>
+      <ol type="1" id="to-do-list"></ol>
+    </div>
+
     <div id="root"></div>
     <script src="./js/main.js"></script>
   </body>
diff --git a/Mini ToDoList App Page/js/main.js b/Mini ToDoList App Page/js/main.js
@@ -1 +1,31 @@
-document.addEventListener("DOMContentLoaded", function () {});
+document.addEventListener("DOMContentLoaded", function () {
+  const taskLists = [];
+  const listItems = document.getElementById("to-do-list");
+  const input = document.querySelector("input[type='text']");
+  const button = document.getElementById("button");
+
+  button.addEventListener("click", function () {
+    const inputValue = input.value.trim();
+    if (!inputValue) return;
+
+    taskLists.push(inputValue);
+    input.value = "";
+
+    // Clear existing list
+    listItems.innerHTML = "";
+
+    // Loop through taskLists and create <li> for each
+    taskLists.forEach((task, index) => {
+      const li = document.createElement("li");
+      li.textContent = task;
+
+      // Add double-click to remove
+      li.addEventListener("dblclick", function () {
+        taskLists.splice(index, 1); // Remove from array
+        listItems.removeChild(li); // Remove from DOM
+      });
+
+      listItems.appendChild(li);
+    });
+  });
+});
