Lesson 23
Interactive HTML + JavaScript
Mini Project: To-Do List
Build a small interactive to-do list using HTML and JavaScript.
What you should understand
Read the lesson carefully, study the example, then use the editor below to experiment with the code yourself.
Example Code
HTML + JavaScript example
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
padding: 20px;
}
input {
padding: 10px;
}
button {
padding: 10px;
}
li {
margin: 10px 0;
}
</style>
</head>
<body>
<h2>My To-Do List</h2>
<input id="task" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<script>
function addTask() {
let task = document.getElementById("task").value;
if (task.trim() === "") {
return;
}
let item = document.createElement("li");
item.textContent = task;
document.getElementById("list").appendChild(item);
document.getElementById("task").value = "";
}
</script>
</body>
</html>
Output
See what your code produces.
Click "Run Example" to execute the example.
Quick Check
Test your understanding
Choose the best answer.
Which method can select an element by its ID?