Merge pull request #36 from tajulafreen/ToDoList

50Projects-HTML-CSS-JavaScript : To do list
tajulafreen · Aug 8, 2024 · 4902908 · 4902908
2 parents 7f7003e + f0003dc
commit 4902908
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -375,6 +375,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>TO DO LIST</summary>
+<p>This project is a simple web-based To-Do List application that allows users to add tasks, categorize them, and filter tasks by category. The application is built using HTML, CSS, and JavaScript, with JavaScript modules to separate concerns and improve maintainability.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/ToDoList/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/ToDoList">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

diff --git a/Source-Code/ToDoList/index.html b/Source-Code/ToDoList/index.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>To-Do List with Categories</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <h1>To-Do List</h1>
+        <div class="form-container">
+            <input type="text" id="task-input" placeholder="Enter task" />
+            <select id="category-select">
+                <option value="">Select Category</option>
+                <option value="Work">Work</option>
+                <option value="Personal">Personal</option>
+                <option value="Urgent">Urgent</option>
+            </select>
+            <button class="add-btn">Add Task</button>
+        </div>
+        <div class="filter-container">
+            <label for="filter-select">Filter by Category:</label>
+            <select id="filter-select">
+                <option value="">All</option>
+                <option value="Work">Work</option>
+                <option value="Personal">Personal</option>
+                <option value="Urgent">Urgent</option>
+            </select>
+        </div>
+        <ul id="task-list">
+            <!-- Tasks will be dynamically inserted here -->
+        </ul>
+    </div>
+    <script type="module" src="index.js"></script>
+</body>
+</html>
diff --git a/Source-Code/ToDoList/index.js b/Source-Code/ToDoList/index.js
@@ -0,0 +1,23 @@
+import { addTask, deleteTask } from './module/main.js';
+import filterTasks from './module/filters.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  const taskInput = document.getElementById('task-input');
+  const categorySelect = document.getElementById('category-select');
+  const taskList = document.getElementById('task-list');
+  const filterSelect = document.getElementById('filter-select');
+
+  document.querySelector('.add-btn').addEventListener('click', () => {
+    addTask(taskInput, categorySelect, taskList);
+  });
+
+  filterSelect.addEventListener('change', () => {
+    filterTasks(filterSelect, taskList);
+  });
+
+  taskList.addEventListener('click', (event) => {
+    if (event.target.classList.contains('delete-btn')) {
+      deleteTask(event.target);
+    }
+  });
+});
diff --git a/Source-Code/ToDoList/module/filters.js b/Source-Code/ToDoList/module/filters.js
@@ -0,0 +1,13 @@
+export default function filterTasks(filterSelect, taskList) {
+  const filterValue = filterSelect.value;
+  const tasks = taskList.getElementsByClassName('task-item');
+
+  for (let i = 0; i < tasks.length; i += 1) {
+    const taskCategory = tasks[i].innerText.split(' (')[1].split(')')[0];
+    if (filterValue === '' || filterValue === taskCategory) {
+      tasks[i].style.display = '';
+    } else {
+      tasks[i].style.display = 'none';
+    }
+  }
+}
diff --git a/Source-Code/ToDoList/module/main.js b/Source-Code/ToDoList/module/main.js
@@ -0,0 +1,27 @@
+export function addTask(taskInput, categorySelect, taskList) {
+  const taskText = taskInput.value.trim();
+  const category = categorySelect.value;
+
+  if (taskText === '' || category === '') {
+    alert('Please enter a task and select a category.');
+    return;
+  }
+
+  const li = document.createElement('li');
+  li.classList.add('task-item');
+  li.innerHTML = `
+          <span class="task-text">${taskText} (${category})</span>
+          <button class="delete-btn">Delete</button>
+      `;
+
+  taskList.appendChild(li);
+
+  // Clear input fields
+  taskInput.value = '';
+  categorySelect.value = '';
+}
+
+export function deleteTask(button) {
+  const taskList = document.getElementById('task-list');
+  taskList.removeChild(button.parentElement);
+}
diff --git a/Source-Code/ToDoList/style.css b/Source-Code/ToDoList/style.css
@@ -0,0 +1,83 @@
+body {
+  font-family: Arial, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+  background-color: #f4f4f4;
+}
+
+.container {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+  text-align: center;
+}
+
+.form-container {
+  margin-bottom: 20px;
+}
+
+#task-input,
+#category-select,
+button {
+  margin: 5px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #0056b3;
+}
+
+.filter-container {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+
+li {
+  background-color: #f9f9f9;
+  margin: 5px 0;
+  padding: 10px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.task-text {
+  flex: 1;
+}
+
+.delete-btn {
+  background-color: #dc3545;
+  color: #fff;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.delete-btn:hover {
+  background-color: #c82333;
+}