Skip to content

Commit 02b96d0

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1153 from vanessanserrano/ToDoApp-vanessanserrano
Added To-Do List project with add, delete, and mark completed features
2 parents 5348119 + 8317c4e commit 02b96d0

File tree

3 files changed

+188
-0
lines changed

3 files changed

+188
-0
lines changed

‎1Application-frontend/ToDoApp/vanessanserrano/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>To Do List App</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>To-Do List</h1>
12+
<input type="text" id="taskInput" placeholder="Add task here:">
13+
<button id="addTaskButton">Add Task</button>
14+
<ul id="taskList"></ul>
15+
<button id="clearTasksButton">Clear All Tasks</button>
16+
</div>
17+
<script src="script.js"></script>
18+
</body>
19+
</html>

‎1Application-frontend/ToDoApp/vanessanserrano/script.js

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
// Elements
2+
const taskInput = document.getElementById('taskInput');
3+
const addTaskButton = document.getElementById('addTaskButton');
4+
const taskList = document.getElementById('taskList');
5+
const clearTasksButton = document.getElementById('clearTasksButton');
6+
7+
// load tasks from local as it loads
8+
document.addEventListener('DOMContentLoaded', loadTasks);
9+
10+
// event listener for new task
11+
addTaskButton.addEventListener('click', addTask);
12+
13+
// event listener for clearing tasks
14+
clearTasksButton.addEventListener('click', clearTasks);
15+
16+
// Add Task Function
17+
function addTask() {
18+
const taskText = taskInput.value;
19+
20+
if (taskText.trim() === '') {
21+
alert('Enter task');
22+
return;
23+
}
24+
25+
const task = document.createElement('li');
26+
task.textContent = taskText;
27+
28+
const deleteButton = document.createElement('button');
29+
deleteButton.textContent = 'Delete';
30+
deleteButton.addEventListener('click', deleteTask);
31+
task.appendChild(deleteButton);
32+
33+
// Add event listener to mark task as completed
34+
task.addEventListener('click', completeTask);
35+
36+
taskList.appendChild(task);
37+
saveTaskToLocalStorage(taskText);
38+
39+
taskInput.value = '';
40+
}
41+
42+
// Mark tasks completed Function
43+
function completeTask(e) {
44+
if (e.target.tagName === 'LI') {
45+
e.target.classList.toggle('completed');
46+
}
47+
}
48+
49+
// Delete Task Function
50+
function deleteTask(e) {
51+
const task = e.target.parentElement;
52+
task.remove();
53+
removeTaskFromLocalStorage(task.textContent.replace('Delete', '').trim());
54+
}
55+
56+
// Clear Task Function
57+
function clearTasks() {
58+
taskList.innerHTML = '';
59+
localStorage.clear();
60+
}
61+
62+
// Save tasks to Local Storage
63+
function saveTaskToLocalStorage(task) {
64+
let tasks = localStorage.getItem('tasks')
65+
? JSON.parse(localStorage.getItem('tasks'))
66+
: [];
67+
tasks.push(task);
68+
localStorage.setItem('tasks', JSON.stringify(tasks));
69+
}
70+
71+
// Remove task from Local Storage
72+
function removeTaskFromLocalStorage(taskToRemove) {
73+
let tasks = JSON.parse(localStorage.getItem('tasks'));
74+
tasks = tasks.filter((task) => task !== taskToRemove);
75+
localStorage.setItem('tasks', JSON.stringify(tasks));
76+
}
77+
78+
// Load tasks and display
79+
function loadTasks() {
80+
const tasks = localStorage.getItem('tasks')
81+
? JSON.parse(localStorage.getItem('tasks'))
82+
: [];
83+
84+
tasks.forEach((taskText) => {
85+
const task = document.createElement('li');
86+
task.textContent = taskText;
87+
88+
const deleteButton = document.createElement('button');
89+
deleteButton.textContent = 'Delete';
90+
deleteButton.addEventListener('click', deleteTask);
91+
task.appendChild(deleteButton);
92+
93+
task.addEventListener('click', completeTask);
94+
95+
taskList.appendChild(task);
96+
});
97+
}

‎1Application-frontend/ToDoApp/vanessanserrano/style.css

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #595959;
4+
text-align: center;
5+
padding: 0;
6+
margin: 0;
7+
}
8+
9+
.container {
10+
margin: 50px auto;
11+
max-width: 400px;
12+
background: #a1a1a1;
13+
padding: 20px;
14+
border-radius: 8px;
15+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
16+
}
17+
18+
h1 {
19+
color: #333;
20+
}
21+
22+
input[type="text"] {
23+
width: 80%;
24+
padding: 10px;
25+
margin: 10px 0;
26+
border: 1px solid #000000;
27+
border-radius: 5px;
28+
}
29+
30+
button {
31+
padding: 10px 15px;
32+
border: none;
33+
background-color: #550055;
34+
color: white;
35+
border-radius: 5px;
36+
cursor: pointer;
37+
margin: 5px 0;
38+
}
39+
40+
button#clearTasksButton {
41+
background-color: #000d53;
42+
}
43+
44+
button:hover {
45+
opacity: 0.9;
46+
}
47+
48+
ul {
49+
list-style-type: none;
50+
padding: 0;
51+
}
52+
53+
li {
54+
background-color: #f9f9f9;
55+
margin: 10px 0;
56+
padding: 10px;
57+
border-radius: 5px;
58+
display: flex;
59+
justify-content: space-between;
60+
}
61+
62+
li.completed {
63+
text-decoration: line-through;
64+
color: gray;
65+
}
66+
67+
li button {
68+
background-color: #dc3545;
69+
color: white;
70+
padding: 5px;
71+
border-radius: 5px;
72+
}

0 commit comments

Comments
 (0)