Added To-Do List project with add, delete, and mark completed features

thinkswell · Oct 7, 2024 · 8317c4e · 8317c4e
1 parent 4965280
commit 8317c4e
Show file tree

Hide file tree

Showing 3 changed files with 188 additions and 0 deletions.
diff --git a/1Application-frontend/ToDoApp/vanessanserrano/index.html b/1Application-frontend/ToDoApp/vanessanserrano/index.html
@@ -0,0 +1,19 @@
+<!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 App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="container">
+    <h1>To-Do List</h1>
+    <input type="text" id="taskInput" placeholder="Add task here:">
+    <button id="addTaskButton">Add Task</button>
+    <ul id="taskList"></ul>
+    <button id="clearTasksButton">Clear All Tasks</button>
+</div>
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/1Application-frontend/ToDoApp/vanessanserrano/script.js 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
@@ -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;
+}