100JSProjects
ProjectsExplore all projects
100JS_WORKSPACE/Build · Learn · Repeat
100JSProjects

Practical HTML, CSS, and JavaScript projects designed to help you turn concepts into real skills—one build at a time.

01Explore

./All projects./About./Contact./Privacy

02Resources

./GitHub repository./Support the project

© 2026 100 JS Projects. Built for developers.

TermsCookiesContact
JS// Project Details

To do ListHTML, CSS & JavaScript Project

HTML5CSS3JavaScript
PROJECT_PREVIEW
To do List project preview
Live preview availableReady
README.mdProject overview

Project Description

In this project, we create a modern to do list. We can add a new task to the list using the input field. Plus, our to-do list is unique in that even after refreshing the page, the tasks remain saved. By utilizing JavaScript, we'll show you how to set and get items from local storage. With each task, there are two icons: a check mark and a trash bin. The check mark allows you to mark the task as completed, while the trash bin lets you delete the task. Each task will also be saved in the local storage.

Technologies Used

HTML5CSS3JavaScript
Preview

Live Demo

Experience the project in action with our interactive live demo.

View Live Demo
Repository

Source Code

Explore the complete source code and learn how it's built.

View on GitHub
JS// Related Projects

Keep Building with Similar Projects

Continue your learning journey with these handpicked projects that share similar concepts and technologies

Temperature Converter project preview
HTMLCSSJavaScript

Temperature Converter

This project aims to create a temperature converter for beginners. The final version of the project includes three inputs for Celsius, Fahrenheit, and Kelvin temperature formats. When you change any of these inputs, for example, if you choose 100 degrees Celsius, you will see the equivalent Celsius value in Fahrenheit and Kelvin formats. Additionally, if you change one input, you will see a real-time change inside the other inputs. For instance, changing the Fahrenheit input to 100 degrees will show you that it is equal to 37 degrees Celsius and 311 Kelvin. To create this project, we will learn how to use an "onchange" event listener to track changes inside the inputs. We will also use the switch statement to track changes based on the name of the input we are working on. Additionally, we will use CSS to give the project a modern look, inspired by newMorphISM design. In summary, this project will help us learn how to create a temperature converter using JavaScript and CSS, and we will learn how to track changes using event listeners and switch statements.

View project
Tip Calculator project preview
HTMLCSSJavaScript

Tip Calculator

In this project, our aim is to build a modern tip calculator. The project's primary interface comprises a container labeled "Tip Calculator" with two input fields: one for the bill amount and the other for the tip percentage. The tip calculator has a modern design that is styled using CSS. We utilized JavaScript to obtain the values of the two input fields and calculate the total amount based on these values.

View project
Age Calculator project preview
HTMLCSSJavaScript

Age Calculator

In this project, we are going to create an age calculator. As you can see from the final version of the project, we have a container here with the title age calculator with an input of a date. If we click on the date input, we can choose the date of our birthday. For example, if we choose a date in in 2022 and if we click now on Calculate Age, you can see the age is calculated based on this date and saying your age is 21 years old.

View project
{ }View All Projects