In this project, we’re going to build a practical to do list using HTML, CSS, and JavaScript. You’ll see how to connect user interactions to visible changes on the page. Along the way, you’ll practice local storage, click events, DOM selection, so you can understand how the interface and JavaScript logic work together.
Create these three files, copy the code into each one, then open index.html with Live Server.
to-do-list/ ├── index.html ├── style.css └── index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>To Do List</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<form class="form">
<input
type="text"
class="input"
placeholder="Enter your task"
autocomplete="off"
/>
<ul class="list">
<!-- <li>
Buy Milk <i class="fas fa-check-square"></i
><i class="fas fa-trash"></i>
</li>
<li class="checked">
Call David <i class="fas fa-check-square"></i
><i class="fas fa-trash"></i>
</li> -->
</ul>
</form>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, we’re going to build a practical age calculator using HTML, CSS, and JavaScript. You’ll see how to take user input, perform a calculation, and display a clear result. Along the way, you’ll practice click events, DOM selection, DOM content updates, so you can understand how the interface and JavaScript logic work together.
View project
In this project, we’re going to build a practical simple stopwatch using HTML, CSS, and JavaScript. You’ll see how to connect user interactions to visible changes on the page. Along the way, you’ll practice setInterval, click events, DOM selection, so you can understand how the interface and JavaScript logic work together.
View project
In this project, we’re going to build a practical pomodoro timer using HTML, CSS, and JavaScript. You’ll see how to control time-based behavior with practical start, stop, and reset actions. Along the way, you’ll practice setInterval, click events, DOM selection, so you can understand how the interface and JavaScript logic work together.
View project