From a4eb9c346cc21e4b3a92405064dfb27471864cbd Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 00:47:00 +0530 Subject: [PATCH 1/8] create a template for project --- Source-Code/ToDoList/index.html | 11 +++++++++++ Source-Code/ToDoList/script.js | 0 Source-Code/ToDoList/style.css | 0 3 files changed, 11 insertions(+) create mode 100644 Source-Code/ToDoList/index.html create mode 100644 Source-Code/ToDoList/script.js create mode 100644 Source-Code/ToDoList/style.css diff --git a/Source-Code/ToDoList/index.html b/Source-Code/ToDoList/index.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/Source-Code/ToDoList/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/Source-Code/ToDoList/script.js b/Source-Code/ToDoList/script.js new file mode 100644 index 0000000..e69de29 diff --git a/Source-Code/ToDoList/style.css b/Source-Code/ToDoList/style.css new file mode 100644 index 0000000..e69de29 From 031ec3ad56f74000ecb39fb3fc8a169157110cd8 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:28:15 +0530 Subject: [PATCH 2/8] Add buton and options --- Source-Code/ToDoList/index.html | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/Source-Code/ToDoList/index.html b/Source-Code/ToDoList/index.html index d01f779..0f73d2a 100644 --- a/Source-Code/ToDoList/index.html +++ b/Source-Code/ToDoList/index.html @@ -3,9 +3,35 @@ - Document + To-Do List with Categories + - +
+

To-Do List

+
+ + + +
+
+ + +
+
    + +
+
+ - \ No newline at end of file + From 18472feee46150fdf9484599a3c1bc0ca4a9122d Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:28:58 +0530 Subject: [PATCH 3/8] Add event listner and import the task --- Source-Code/ToDoList/index.js | 23 +++++++++++++++++++++++ Source-Code/ToDoList/script.js | 0 2 files changed, 23 insertions(+) create mode 100644 Source-Code/ToDoList/index.js delete mode 100644 Source-Code/ToDoList/script.js diff --git a/Source-Code/ToDoList/index.js b/Source-Code/ToDoList/index.js new file mode 100644 index 0000000..7010274 --- /dev/null +++ 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/script.js b/Source-Code/ToDoList/script.js deleted file mode 100644 index e69de29..0000000 From 5313503cc034ad3c3a56e5e1a5d6ee22830ae5f7 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:29:13 +0530 Subject: [PATCH 4/8] give the styles --- Source-Code/ToDoList/style.css | 82 ++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/Source-Code/ToDoList/style.css b/Source-Code/ToDoList/style.css index e69de29..3d58179 100644 --- a/Source-Code/ToDoList/style.css +++ b/Source-Code/ToDoList/style.css @@ -0,0 +1,82 @@ +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; +} From c6be96b08865b7a1895c6d68a6d42da7ef5aac3a Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:29:33 +0530 Subject: [PATCH 5/8] dd filter funtionality --- Source-Code/ToDoList/module/filters.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 Source-Code/ToDoList/module/filters.js diff --git a/Source-Code/ToDoList/module/filters.js b/Source-Code/ToDoList/module/filters.js new file mode 100644 index 0000000..ec9d708 --- /dev/null +++ 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'; + } + } +} From d748447ea04a687f5dd720b8300675a4d9fade1f Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:30:08 +0530 Subject: [PATCH 6/8] create the add task and delete task functionality --- Source-Code/ToDoList/module/main.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) create mode 100644 Source-Code/ToDoList/module/main.js diff --git a/Source-Code/ToDoList/module/main.js b/Source-Code/ToDoList/module/main.js new file mode 100644 index 0000000..606a8a9 --- /dev/null +++ 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 = ` + ${taskText} (${category}) + + `; + + taskList.appendChild(li); + + // Clear input fields + taskInput.value = ''; + categorySelect.value = ''; +} + +export function deleteTask(button) { + const taskList = document.getElementById('task-list'); + taskList.removeChild(button.parentElement); +} From 9ecad5619187f7e25bc710e57a6bc661f3200775 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:30:17 +0530 Subject: [PATCH 7/8] update readme --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/README.md b/README.md index 2770c73..aa0be88 100644 --- a/README.md +++ b/README.md @@ -375,6 +375,17 @@ In order to run this project you need: +
  • +
    +TO DO LIST +

    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.

    + +
    +
    • +

    (back to top)

    From f0003dc55e2ac081cda88180e5557ba0d9fdff31 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Fri, 9 Aug 2024 01:37:28 +0530 Subject: [PATCH 8/8] solve linter issue --- Source-Code/ToDoList/style.css | 91 +++++++++++++++++----------------- 1 file changed, 46 insertions(+), 45 deletions(-) diff --git a/Source-Code/ToDoList/style.css b/Source-Code/ToDoList/style.css index 3d58179..083349e 100644 --- a/Source-Code/ToDoList/style.css +++ b/Source-Code/ToDoList/style.css @@ -1,82 +1,83 @@ body { - font-family: Arial, sans-serif; - display: flex; - justify-content: center; - align-items: center; - height: 100vh; - margin: 0; - background-color: #f4f4f4; + 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); - + background-color: #fff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { - text-align: center; + text-align: center; } .form-container { - margin-bottom: 20px; + margin-bottom: 20px; } -#task-input, #category-select, button { - margin: 5px; - padding: 10px; - border: 1px solid #ccc; - border-radius: 4px; +#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; + background-color: #007bff; + color: #fff; + border: none; + cursor: pointer; } button:hover { - background-color: #0056b3; + background-color: #0056b3; } .filter-container { - margin-bottom: 20px; - display: flex; - justify-content: space-between; - align-items: center; + margin-bottom: 20px; + display: flex; + justify-content: space-between; + align-items: center; } ul { - list-style-type: none; - padding: 0; + 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; + background-color: #f9f9f9; + margin: 5px 0; + padding: 10px; + border-radius: 4px; + display: flex; + justify-content: space-between; + align-items: center; } .task-text { - flex: 1; + flex: 1; } .delete-btn { - background-color: #dc3545; - color: #fff; - border: none; - padding: 5px 10px; - border-radius: 4px; - cursor: pointer; + background-color: #dc3545; + color: #fff; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; } .delete-btn:hover { - background-color: #c82333; + background-color: #c82333; }