Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 12, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions 1Application-frontend/ToDoApp/vanessanserrano/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
97 changes: 97 additions & 0 deletions 1Application-frontend/ToDoApp/vanessanserrano/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
});
}
72 changes: 72 additions & 0 deletions 1Application-frontend/ToDoApp/vanessanserrano/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Loading