Merge pull request #124 from codedex-io/add-todo-list-tutorial-ugc

Publish Shadeira's ToDo app project tutorial
codedex-io · Dec 22, 2023 · 25e3fbb · 25e3fbb
2 parents 1d3bf0f + 3505022
commit 25e3fbb
Show file tree

Hide file tree

Showing 12 changed files with 818 additions and 0 deletions.
diff --git a/...-a-to-do-list-app-with-html-css-js/create-a-to-do-list-app-with-html-css-js.mdx b/...-a-to-do-list-app-with-html-css-js/create-a-to-do-list-app-with-html-css-js.mdx
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/finished-todo-list.gif b/projects/create-a-to-do-list-app-with-html-css-js/finished-todo-list.gif
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/finished-todo-list.png b/projects/create-a-to-do-list-app-with-html-css-js/finished-todo-list.png
diff --git a/...ects/create-a-to-do-list-app-with-html-css-js/todo-list-complete-uncomplete.png b/...ects/create-a-to-do-list-app-with-html-css-js/todo-list-complete-uncomplete.png
diff --git a/...ts/create-a-to-do-list-app-with-html-css-js/todo-list-edit-delete-html-only.gif b/...ts/create-a-to-do-list-app-with-html-css-js/todo-list-edit-delete-html-only.gif
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-edit-task-html.gif b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-edit-task-html.gif
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-html-only.png b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-html-only.png
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-project/index.html b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-project/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TO-DO List</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <!-- create a container for the todo list -->
+    <div id="todo-container">
+      <!-- todo list header -->
+      <div id="header">
+        <h1>To Do List</h1>
+      </div>
+
+      <!-- create input box -->
+      <div id="todo-form">
+        <input
+          type="text"
+          class="input-item"
+          name="input_box"
+          id="input-box"
+          placeholder="Add Task"
+        />
+
+        <!-- add button  -->
+        <button id="input-button" onclick="addTask()">Add</button>
+      </div>
+
+      <!-- task list -->
+      <h2>Task List</h2>
+      <ul id="list-container"></ul>
+
+      <hr>
+
+      <!-- task list counter  -->
+      <div class="counter-container">
+        <div id="task-counters">
+          Completed: <span id="completed-counter">0</span> | Uncompleted:
+          <span id="uncompleted-counter">0</span>
+        </div>
+      </div>
+    </div>
+
+    <script type="text/javascript" src="script.js"></script>
+  </body>
+</html>
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-project/script.js b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-project/script.js
@@ -0,0 +1,74 @@
+const inputBox = document.getElementById("input-box");
+const listContainer = document.getElementById("list-container");
+const completedCounter = document.getElementById("completed-counter");
+const uncompletedCounter = document.getElementById("uncompleted-counter");
+
+function updateCounters() {
+  const completedTasks = document.querySelectorAll(".completed").length;
+  const uncompletedTasks = document.querySelectorAll("li:not(.completed)").length;
+
+  completedCounter.textContent = completedTasks;
+  uncompletedCounter.textContent = uncompletedTasks;
+}
+
+function addTask() {
+  const task = inputBox.value.trim();
+  if (!task) {
+    alert("Please write down a task");
+    console.log("no task added");
+
+    return;
+  }
+
+  const li = document.createElement("li");
+  li.innerHTML = `
+    <label>
+      <input type="checkbox">
+      <span>${task}</span>
+    </label>
+    <span class="edit-btn">Edit</span>
+    <span class="delete-btn">Delete</span>
+    `;
+
+  listContainer.appendChild(li);
+
+  // clear the input field
+  inputBox.value = " ";
+
+  // attach event listeners to the new task
+  const checkbox = li.querySelector("input");
+  const editBtn = li.querySelector(".edit-btn");
+  const taskSpan = li.querySelector("span");
+  const deleteBtn = li.querySelector(".delete-btn");
+
+  // strike out the completed task
+  checkbox.addEventListener("click", function () {
+    li.classList.toggle("completed", checkbox.checked);
+    updateCounters();
+  });
+
+  editBtn.addEventListener("click", function () {
+    const update = prompt("Edit task:", taskSpan.textContent);
+    if (update !== null) {
+      taskSpan.textContent = update;
+      li.classList.remove("completed");
+      checkbox.checked = false;
+      updateCounters();
+    }
+  });
+
+  deleteBtn.addEventListener("click", function () {
+    if (confirm("Are you sure you want to delete this task?")) {
+      li.remove();
+      updateCounters();
+    }
+  });
+  updateCounters();
+}
+
+// add task when pressing Enter key
+inputBox.addEventListener("keyup", function (event) {
+  if (event.key === "Enter") {
+    addTask();
+  }
+});
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-project/style.css b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-project/style.css
@@ -0,0 +1,96 @@
+body{ 
+  background: rgb(0,0,0);
+  background: radial-gradient(circle, rgba(0,0,0,0.028124999999999956) 0%, rgba(253,187,45,1) 100%);
+  font-family: Arial, sans-serif;
+  text-align: center;
+  margin-top: 50px;
+}
+
+.todo-container{
+  background: rgb(41, 33, 33);
+  width: 400px;
+  margin: 0 auto;
+  border: 2px solid #0033ff;
+  padding: 20px;
+  color: white;
+  border-radius: 15px;
+}
+
+#input-box{
+  width: 200px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  margin-right: 5px;
+  font-size: 20px;
+}
+
+#input-button{
+  font-size: 20px;
+  cursor: pointer;
+  transition: 0.4s;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  background-color: #2e60ea;
+}
+
+.task button{
+  background: rgb(12, 124, 251);
+  border-radius: 5px;
+  margin: 0px 5px;
+  padding: 3px 5px;
+  border: none;
+  cursor: pointer;
+  color: white;
+  float: right;
+}
+
+hr{
+  border: 1px solid #0033ff;
+}
+
+#header{
+  margin: 5px;
+  font-size: 20px;
+  text-align: center;
+}
+
+h1{
+  margin-bottom: 20px; 
+}
+
+#input-button:hover {
+  background-color: #9eb7fd; 
+} 
+
+ul{
+  list-style: none;
+  padding: 0;
+  margin-top: 20px;
+  text-align:left;
+}
+
+li {
+  border: 1px solid white;
+  border-radius: 5px;
+  margin-bottom: 10px;
+  padding: 10px;
+  margin-top: 10px;
+}
+
+.edit-btn, .delete-btn, .complete-btn{
+  float: right;
+  color:crimson;
+  cursor: pointer;
+  margin: 3px 5px;
+  border: none;
+  padding: 3px 5px;
+  background: none;  
+} 
+
+.completed {
+  text-decoration: line-through;
+  color: gray;
+  border: 1px solid gray;
+}
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-remove-task-html.gif b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-remove-task-html.gif
diff --git a/projects/create-a-to-do-list-app-with-html-css-js/todo-list-vs-code.png b/projects/create-a-to-do-list-app-with-html-css-js/todo-list-vs-code.png