How to Create ToDo list App Using JavaScript


Are you tired of constantly forgetting important tasks and deadlines? Do you find yourself struggling to stay organized and on top of your to-do list? Well, fear not! In this blog post, we’ll be showing you how to create a powerful and user-friendly to-do list application using the versatile programming language, JavaScript.

Whether you’re a seasoned developer or just starting out, this step-by-step guide will help you create a customizable and efficient to-do list app that will revolutionize the way you manage your tasks. So grab your coding tools and let’s get started!

Recently I shared a complete blog post on How to make a quiz app using HTML, CSS, and JavaScript only if you want to make this type of Quiz app please check this article first.

Information About This Project

Languages HTML, CSS, JavaScript
Preview Take Preview
Created by Coding Pakistan
Download LinkAvailable

Steps to create a Todo list app Using JavaScript

Step 1: Create a new HTML file and add the necessary tags (html, head, body).

Step 2: Inside the body tag, create a container element (e.g. div) to hold the to-do list.

Step 3: Inside the container element, create a form element to allow users to add new tasks to the list. Add an input field and a button to the form.

Step 4: Create a list element (ul) to hold the tasks. Give it an ID so you can reference it later in your JavaScript code.

Step 5: Create a JavaScript file and link it to your HTML file using a script tag.

Step 6: In your JavaScript file, create an array to store the tasks.

Step 7: Add an event listener to the form’s submit button. When the button is clicked, get the value of the input field and add it to the tasks array.

Step 8: Create a function to display the tasks in the list. Use JavaScript to dynamically create list items and add them to the list element in the HTML.

Step 9: Call the display function whenever a new task is added to the array.

Step 10: Add a delete button next to each task in the list. When the delete button is clicked, remove the corresponding task from the array and update the display.

Step 11: Add CSS styles according to your need to make your app look good and responsive.

Video Tutorial ToDo List App Using JavaScript

This video is created by the Wscube Tech YouTube channel please subscribe to this channel for more videos like this one.

If you want to learn more about Todo List apps please watch this video till the end. I highly recommend that you do so, as I have provided detailed explanations of each line of code through written comments and demonstrated the function of each line of code.

You Might Like This

Todo List App HTML, CSS & JavaScript [Source Codes]

To create a ToDo List app using HTML CSS & JavaScript, follow the given steps line by line:

  1. Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
  2. Create a index.html file. File name must be index and its extension .html
  3. Create a style.css file. File name must be style and its extension .css
  4. Create a script.js file. File name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Password Generator by clicking on the given download button. It’s free of cost.

First, paste the following codes into your index.html file.


<!DOCTYPE html>
<!-- Ceated by -->
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
        <div class="box">
            <input type="text" id="item" autofocus placeholder="Write something here...">
            <ul id="to-do-box">
    <script src="" crossorigin="anonymous"></script>
    <script src="script.js"></script>

Second, paste the following codes into your style.css file.


/* Ceated by */
@import url('');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3498db;
.box {
    width: 700px;
    min-height: 500px;
    background-color: white;
    border-radius: 5px;
    padding: 15px;
#item {
    padding: 10px;
    font-size: 20px;
    width: 100%;
    border: 0;
    outline: 0;
    display: block;
    font-weight: bold;
    box-shadow: 0px 0px 2px grey;
#to-do-box {
    margin-top: 20px;
    list-style: none;
#to-do-box li {
    position: relative;
    background-color: #2c3e50;
    color: white;
    padding: 10px;
    border-radius: 2px;
    padding-right: 30px;
    text-align: justify;
    margin-top: 10px;
    user-select: none;
#to-do-box li i {
    position: absolute;
    right: 10px;
    top: 10px;
.done {
    text-decoration: line-through;
    color: black;
    background-color: #95a5a6 !important;

Last, paste the following codes into your script.js file.

JavaScript FILE

const item = document.querySelector("#item")
const toDoBox = document.querySelector("#to-do-box")
// Ceated by
    function(event) {
        if (event.key == "Enter") {
            this.value = ""
const addToDo = (item) => {
    const listItem = document.createElement("li");
    listItem.innerHTML = `
        <i class="fas fa-times"></i>
        function() {
        function() {

ToDo List App [Download Source Codes]

That’s all, now you’ve successfully created a ToDo list app using  HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files.

Todo list app using javascript with source code

Leave a Comment