To do list

[salehsamuel]

<title>To-Do List App</title> <style> body { font-family: Arial, sans-serif; background: #f4f4f4; display: flex; justify-content: center; align-items: center; height: 100vh; }

.container {
  background: #fff;
  padding: 20px;
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

button {
  width: 100%;
  padding: 8px;
  background: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 10px;
}

li {
  padding: 8px;
  background: #eee;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  cursor: pointer;
}

li.completed {
  text-decoration: line-through;
  color: gray;
}

.delete {
  background: red;
  color: white;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 3px;
}

</style>

My To-Do List

Add Task

<ul id="taskList"></ul>

<script> let tasks = JSON.parse(localStorage.getItem("tasks")) || []; function saveTasks() { localStorage.setItem("tasks", JSON.stringify(tasks)); } function renderTasks() { const taskList = document.getElementById("taskList"); taskList.innerHTML = ""; tasks.forEach((task, index) => { const li = document.createElement("li"); li.textContent = task.text; if (task.completed) { li.classList.add("completed"); } li.addEventListener("click", function () { tasks[index].completed = !tasks[index].completed; saveTasks(); renderTasks(); }); const deleteBtn = document.createElement("button"); deleteBtn.textContent = "X"; deleteBtn.className = "delete"; deleteBtn.onclick = function (e) { e.stopPropagation(); // prevent toggle when deleting tasks.splice(index, 1); saveTasks(); renderTasks(); }; li.appendChild(deleteBtn); taskList.appendChild(li); }); } function addTask() { const taskInput = document.getElementById("taskInput"); const taskText = taskInput.value.trim(); if (taskText === "") { alert("Please enter a task"); return; } tasks.push({ text: taskText, completed: false }); saveTasks(); renderTasks(); taskInput.value = ""; } renderTasks(); </script>