PR #24: Todolist

Merge pull request #24 from 160121/todolist
Grow-with-Open-Source · Oct 31, 2023 · d72cc99 · d72cc99
2 parents 06e2427 + a565df8
commit d72cc99
Show file tree

Hide file tree

Showing 4 changed files with 195 additions and 0 deletions.
diff --git a/TodoList/index.html b/TodoList/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>To-Do list</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>TODOLIST</h1>
+        <div class="form">
+             <input type="text" class="tab" placeholder="Enter task to add" />
+            <button class="addToDo">+</button>
+        </div>
+      <div class="todo"></div>
+      <div class="foot">
+        <div class="count">0 tasks done</div>
+        <button class="removeChecked">Remove Checked ❎</button>
+      </div>
+    </div>
+
+    <script src="index.js"></script>
+</body>
+</html>
diff --git a/TodoList/index.js b/TodoList/index.js
@@ -0,0 +1,85 @@
+const input = document.querySelector('.tab');
+const addButton = document.querySelector('.addToDo');
+const todoContainer = document.querySelector('.todo');
+const countDisplay = document.querySelector('.count');
+const removeButton = document.querySelector('.removeChecked');
+let completedCount = 0;
+let totalCount = 0;
+
+addButton.addEventListener('click', function (e) {
+  e.preventDefault();
+  const paragraph1 = document.createElement('div');
+  const paragraph2 = document.createElement('div');
+  const cont = document.createElement('div');
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  paragraph1.appendChild(checkbox);
+  const text = document.createTextNode(input.value);
+  paragraph1.appendChild(text);
+  const editButton = document.createElement('button');
+  editButton.textContent = '✒️';
+  paragraph2.appendChild(editButton);
+  const deleteButton = document.createElement('button');
+  deleteButton.textContent = '❎';
+  paragraph2.appendChild(deleteButton);
+  cont.appendChild(paragraph1);
+  cont.appendChild(paragraph2);
+  todoContainer.appendChild(cont);
+  input.value = '';
+  totalCount++;
+  updateCountDisplay();
+  checkbox.addEventListener('click', function () {
+    if (checkbox.checked) {
+      cont.style.textDecoration = 'line-through';
+      completedCount++;
+    } else {
+      cont.style.textDecoration = 'none';
+      completedCount--;
+    }
+    updateCountDisplay();
+  });
+  editButton.addEventListener('click', function () {
+    const editText = prompt('Edit task:', text.textContent);
+    if (editText !== null) {
+      text.textContent = editText;
+    }
+  });
+  deleteButton.addEventListener('click', function () {
+    todoContainer.removeChild(cont);
+    totalCount--;
+    if (checkbox.checked) {
+      completedCount--;
+    }
+    updateCountDisplay();
+  });
+});
+
+function updateCountDisplay() {
+  countDisplay.textContent = `${completedCount} of ${totalCount} tasks done`;
+  const completionRatio = completedCount / totalCount;
+  if (completionRatio < 0.25) {
+    countDisplay.style.backgroundimage = '#ff6347';
+  } else if (completionRatio < 0.5) {
+    countDisplay.style.backgroundColor = '#ffd700';
+  } else if (completionRatio < 0.75) {
+    countDisplay.style.backgroundColor = '#7cfc00';
+  } else {
+    countDisplay.style.backgroundColor = '#00ff7f';
+  }
+  //countDisplay.style.backgroundimage='linear-gradient(to right,yellow completionRatio%,transparent)';
+}
+
+removeButton.addEventListener('click', function () {
+  const checkboxes = todoContainer.querySelectorAll('input[type=checkbox]');
+  checkboxes.forEach(function (checkbox) {
+    if (checkbox.checked) {
+      const cont = checkbox.parentNode.parentNode;
+      todoContainer.removeChild(cont);
+      totalCount--;
+      if (checkbox.checked) {
+        completedCount--;
+      }
+    }
+  });
+  updateCountDisplay();
+});
diff --git a/TodoList/readme.md b/TodoList/readme.md
@@ -0,0 +1,18 @@
+# TodoList
+
+TodoList is a simple web application that helps you manage your tasks and stay organized. With TodoList, you can add new tasks, mark them as completed, and delete them when you're done.
+
+## Features
+
+- Add new tasks to your to-do list
+- Mark tasks as completed
+- Delete tasks from your to-do list
+- Simple and easy to use interface
+
+## Usage
+
+1. Enter the task that you want to add to your to-do list in the text box and press the "Add" button.
+2. Your new task will be added to the list.
+3. To mark a task as completed, simply click on the checkbox next to the task.
+4. To delete a task, click on the "Delete" button next to the task.
+5. To clear all completed tasks, click on the "Clear completed tasks" button.
diff --git a/TodoList/style.css b/TodoList/style.css
@@ -0,0 +1,66 @@
+*{
+    margin:0;
+    padding:0;
+    box-sizing: border-box;
+}
+body{
+    background-image: linear-gradient(to right,rgb(0, 128, 255),rgb(135, 206, 235));
+}
+.container{
+    background-color: aliceblue;
+    margin:10rem auto;
+    width:60%;
+    padding:2rem;
+}
+.addToDo,.removeChecked{
+    padding: 1rem;
+    background-image:linear-gradient(to right,rgb(0, 128, 255),rgb(135, 206, 235)) ;
+    border:none;
+    border-radius: 4px;
+    color: white;
+    font-size: 18px;
+}
+h1{
+    margin-top: 1rem;
+    text-align: center;
+}
+input{
+    border:2px solid rgba(97, 156, 7, 0.733);
+    border-radius: 4px;
+    padding:1rem;
+    width:90%;
+    margin:2rem auto;
+}
+.todo button{
+    border:none;
+    margin: 0 1rem 0 1rem;
+}
+.todo div{
+    padding: 0%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.todo div:hover{
+    background-color:rgba(226, 220, 220, 0.929);
+}
+.count{
+    padding: 1rem;
+    background-color: aqua;
+    border:none;
+    border-radius: 4px;
+    font-size: 18px;
+}
+.foot{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content:space-between;
+}
+input[type="checkbox"]{
+    width:auto;
+    margin-right:.5rem;
+    margin-left: .5rem;
+}
+
+