Simple To-Do List || How to create a simple list
HTML
<!DoctypeHTML>
<html>
<head>
<title>Simple To-Do List</title>
</head>
<body>
<h1>Simple To-Do List</h1>
<div id="todo-list">
<input type="text" id="task" placeholder="Add a new task">
<button onclick="addTask()">Add</button>
<ul id="tasks"></ul>
</div>
</body>
</html>
CSS
<style> body { font-family: Arial, sans-serif; } #todo-list { max-width: 400px; margin: 0 auto; } ul { list-style: none; padding: 0; } li { display: flex; justify-content: space-between; margin: 10px 0; } input[type="text"] { flex: 1; padding: 5px; } button { margin-left: 5px; } </style>
JAVASCRIPT
function addTask() { const taskInput = document.getElementById("task"); const taskText = taskInput.value.trim(); if (taskText !== "") { const taskList = document.getElementById("tasks"); const listItem = document.createElement("li"); listItem.innerHTML = ` <input type="text" value="${taskText}" disabled> <button onclick="editTask(this)">Edit</button> <button onclick="deleteTask(this)">Delete</button> `; taskList.appendChild(listItem); taskInput.value = ""; } } function editTask(editButton) { const listItem = editButton.parentElement; const taskInput = listItem.querySelector("input[type='text']"); const isEditing = taskInput.disabled; if (isEditing) { taskInput.disabled = false; editButton.innerText = "Save"; } else { taskInput.disabled = true; editButton.innerText = "Edit"; } } function deleteTask(deleteButton) { const listItem = deleteButton.parentElement; listItem.remove(); };
👉👀📕📘📚
