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)

    diff --git a/Source-Code/ToDoList/index.html b/Source-Code/ToDoList/index.html new file mode 100644 index 0000000..0f73d2a --- /dev/null +++ b/Source-Code/ToDoList/index.html @@ -0,0 +1,37 @@ + + + + + + To-Do List with Categories + + + +
    +

    To-Do List

    +
    + + + +
    +
    + + +
    + +
    + + + 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/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'; + } + } +} 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); +} diff --git a/Source-Code/ToDoList/style.css b/Source-Code/ToDoList/style.css new file mode 100644 index 0000000..083349e --- /dev/null +++ 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; +}