From 8317c4ec78d1574f34901ab0c0ec0afa1c14954c Mon Sep 17 00:00:00 2001 From: Vanessa Serrano Date: Mon, 7 Oct 2024 19:14:19 -0400 Subject: [PATCH] Added To-Do List project with add, delete, and mark completed features --- .../ToDoApp/vanessanserrano/index.html | 19 ++++ .../ToDoApp/vanessanserrano/script.js | 97 +++++++++++++++++++ .../ToDoApp/vanessanserrano/style.css | 72 ++++++++++++++ 3 files changed, 188 insertions(+) create mode 100644 1Application-frontend/ToDoApp/vanessanserrano/index.html create mode 100644 1Application-frontend/ToDoApp/vanessanserrano/script.js create mode 100644 1Application-frontend/ToDoApp/vanessanserrano/style.css diff --git a/1Application-frontend/ToDoApp/vanessanserrano/index.html b/1Application-frontend/ToDoApp/vanessanserrano/index.html new file mode 100644 index 000000000..e8755dde1 --- /dev/null +++ b/1Application-frontend/ToDoApp/vanessanserrano/index.html @@ -0,0 +1,19 @@ + + + + + + To Do List App + + + +
+

To-Do List

+ + + + +
+ + + \ No newline at end of file diff --git a/1Application-frontend/ToDoApp/vanessanserrano/script.js b/1Application-frontend/ToDoApp/vanessanserrano/script.js new file mode 100644 index 000000000..1a0c6f2be --- /dev/null +++ b/1Application-frontend/ToDoApp/vanessanserrano/script.js @@ -0,0 +1,97 @@ +// Elements +const taskInput = document.getElementById('taskInput'); +const addTaskButton = document.getElementById('addTaskButton'); +const taskList = document.getElementById('taskList'); +const clearTasksButton = document.getElementById('clearTasksButton'); + +// load tasks from local as it loads +document.addEventListener('DOMContentLoaded', loadTasks); + +// event listener for new task +addTaskButton.addEventListener('click', addTask); + +// event listener for clearing tasks +clearTasksButton.addEventListener('click', clearTasks); + +// Add Task Function +function addTask() { + const taskText = taskInput.value; + + if (taskText.trim() === '') { + alert('Enter task'); + return; + } + + const task = document.createElement('li'); + task.textContent = taskText; + + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + deleteButton.addEventListener('click', deleteTask); + task.appendChild(deleteButton); + + // Add event listener to mark task as completed + task.addEventListener('click', completeTask); + + taskList.appendChild(task); + saveTaskToLocalStorage(taskText); + + taskInput.value = ''; +} + +// Mark tasks completed Function +function completeTask(e) { + if (e.target.tagName === 'LI') { + e.target.classList.toggle('completed'); + } +} + +// Delete Task Function +function deleteTask(e) { + const task = e.target.parentElement; + task.remove(); + removeTaskFromLocalStorage(task.textContent.replace('Delete', '').trim()); +} + +// Clear Task Function +function clearTasks() { + taskList.innerHTML = ''; + localStorage.clear(); +} + +// Save tasks to Local Storage +function saveTaskToLocalStorage(task) { + let tasks = localStorage.getItem('tasks') + ? JSON.parse(localStorage.getItem('tasks')) + : []; + tasks.push(task); + localStorage.setItem('tasks', JSON.stringify(tasks)); +} + +// Remove task from Local Storage +function removeTaskFromLocalStorage(taskToRemove) { + let tasks = JSON.parse(localStorage.getItem('tasks')); + tasks = tasks.filter((task) => task !== taskToRemove); + localStorage.setItem('tasks', JSON.stringify(tasks)); +} + +// Load tasks and display +function loadTasks() { + const tasks = localStorage.getItem('tasks') + ? JSON.parse(localStorage.getItem('tasks')) + : []; + + tasks.forEach((taskText) => { + const task = document.createElement('li'); + task.textContent = taskText; + + const deleteButton = document.createElement('button'); + deleteButton.textContent = 'Delete'; + deleteButton.addEventListener('click', deleteTask); + task.appendChild(deleteButton); + + task.addEventListener('click', completeTask); + + taskList.appendChild(task); + }); +} diff --git a/1Application-frontend/ToDoApp/vanessanserrano/style.css b/1Application-frontend/ToDoApp/vanessanserrano/style.css new file mode 100644 index 000000000..2160b4d09 --- /dev/null +++ b/1Application-frontend/ToDoApp/vanessanserrano/style.css @@ -0,0 +1,72 @@ +body { + font-family: Arial, sans-serif; + background-color: #595959; + text-align: center; + padding: 0; + margin: 0; +} + +.container { + margin: 50px auto; + max-width: 400px; + background: #a1a1a1; + padding: 20px; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +h1 { + color: #333; +} + +input[type="text"] { + width: 80%; + padding: 10px; + margin: 10px 0; + border: 1px solid #000000; + border-radius: 5px; +} + +button { + padding: 10px 15px; + border: none; + background-color: #550055; + color: white; + border-radius: 5px; + cursor: pointer; + margin: 5px 0; +} + +button#clearTasksButton { + background-color: #000d53; +} + +button:hover { + opacity: 0.9; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + background-color: #f9f9f9; + margin: 10px 0; + padding: 10px; + border-radius: 5px; + display: flex; + justify-content: space-between; +} + +li.completed { + text-decoration: line-through; + color: gray; +} + +li button { + background-color: #dc3545; + color: white; + padding: 5px; + border-radius: 5px; +}