File size: 1,953 Bytes
450405b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<style>
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
align-items: center;
margin-top: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Todo App</h1>
<textarea id="todo-input"></textarea>
<button id="add-button">Add</button>
<ul id="todo-list"></ul>
<script>
// Array to store todo items
let todos = [];
// Get references to the DOM elements we need
const input = document.getElementById("todo-input");
const addButton = document.getElementById("add-button");
const list = document.getElementById("todo-list");
// Function to add a new todo item to the list
function addTodo() {
// Get the value of the textarea
const todoText = input.value;
// Add the new todo item to the array
todos.push({
text: todoText,
completed: false
});
// Clear the textarea
input.value = "";
// Re-render the list
renderTodos();
}
// Function to render the todo list
function renderTodos() {
// Clear the existing list
list.innerHTML = "";
// Loop through the todo items
for (const todo of todos) {
// Create a new list item element
const item = document.createElement("li");
// Add a checkbox to mark the todo as completed
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = todo.completed;
item.appendChild(checkbox);
// Add the todo text to the list item
const text = document.createTextNode(todo.text);
item.appendChild(text);
// Append the list item to the list
list.appendChild(item);
}
}
// Add event listeners
addButton.addEventListener("click", addTodo);
</script>
</body>
</html>
|