How to create to do list in html using javascript


Build a simple, useful web app for tasks managment with HTML/CSS/JS. In this project, we will make to-do list! This project will provide features such as add & remove of task.

Lets start by creating three files:

  • 1. index.html - for our markup
  • 2. style.css - for styling
  • 3. main.js - for the functionality
Here is what our HTML file should look like:

In this markup, will create structure of To do list. First, we going to define that how we insert data as task what we need to do then display that iserted data into highlited text. At last, If you have done task then you click on that highlited text it will turn into green which means you have done that but if you want to delete that highlited task and want to isert new task again then simply click on cross button at the right & its done.

Lets! go through the code.


        <div class="to-do">
        <h1 class="intro">To-do Task Manager</h1>
            <input id="userInput" type="text" placeholder="New item..." maxlength="27">
            <button id="enter">Submit</button>

            <!-- Empty List -->
            <div class="listItems to-do-tasks">
                <ul>
                </ul>
            </div>
        </div>
    
Its time for CSS styling so it will look better

        .to-do .intro {
            margin: 30px 0px;
            font-weight: bold;
        }
        
        .to-do h1 {
            color: black;
            text-transform: uppercase;
            font-weight: 800;
        }
        
        .to-do p {
            font-weight: 600;
        }
        
        .to-do #enter {
            border: none;
            padding: 18px 15px;
            color: white;
            font-size: 20px;
            background-color: gray;
            transition: all 0.75s ease;
            -webkit-transition: all 0.75s ease;
            -moz-transition: all 0.75s ease;
            -ms-transition: all 0.75s ease;
            -o-transition: all 0.75 ease;
            font-weight: normal;
            cursor: pointer;
        }
        
        
        .to-do ul {
            text-align: left;
            margin-top: 20px;
            width: 50%;
            padding: 0;
        }
        
        
        .to-do li {
            list-style: none;
            padding: 10px 20px;
            color: black;
            text-transform: capitalize;
            font-weight: 600;
            border-radius: 5px;
            margin-bottom: 10px;
            background: gainsboro;
            transition: all 0.75s ease;
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            -o-transition: all 0.5 ease;
        }
        
        
        .to-do li > button {
            font-weight: normal;
            background: none;
            border: none;
            float: right;
            color: black;
            font-weight: 800;
            cursor: pointer;
        }
        
        .to-do input {
            border-radius: 5px;
            min-width: 65%;
            padding: 5px;
            border: none;
            background: ghostwhite;
            height: 50px;
            font-size: 20px;
            padding-left: 25px;
        }
        
        .to-do-tasks {
            display: flex;
            justify-content: center;
        }
        .to-do .done {
            background: #51DF70 !important;
            color: #00891E;
        }
        
        .to-do .delete {
            display: none;
        }
    
Now its time to make TO-DO Web app alive with simple javascript

In this, i'have commented on code so it will help you to understand more clearly

To make our to-do list work, we need it to do three things at the minimum:

  • add tasks on press of the enter key or click on submit button
  • after submitting text, clear input field
  • remove tasks on click of cross button
  • highlight task when clicked

        var enterButton = document.getElementById("enter");
        var input = document.getElementById("userInput");
        var ul = document.querySelector("ul");
        var item = document.getElementsByTagName("li");
        
        function inputLength(){
            return input.value.length;
        } 
        
        function listLength(){
            return item.length;
        }
        
        function createListElement() {
            var li = document.createElement("li"); // creates an element "li"
            li.appendChild(document.createTextNode(input.value)); //makes text from input field the li text
            ul.appendChild(li); //adds li to ul
            input.value = ""; //Reset text input field
        
        
            //START STRIKETHROUGH
            // because it's in the function, it only adds it for new items
            function crossOut() {
                li.classList.toggle("done");
            }
        
            li.addEventListener("click",crossOut);
            //END STRIKETHROUGH
        
        
            // START ADD DELETE BUTTON
            var dBtn = document.createElement("button");
            dBtn.appendChild(document.createTextNode("X"));
            li.appendChild(dBtn);
            dBtn.addEventListener("click", deleteListItem);
            // END ADD DELETE BUTTON
        
        
            //ADD CLASS DELETE (DISPLAY: NONE)
            function deleteListItem(){
                li.classList.add("delete")
            }
            //END ADD CLASS DELETE
        }
        
        
        function addListAfterClick(){
            if (inputLength() > 0) { //makes sure that an empty input field doesn't create a li
                createListElement();
            }
        }
        
        function addListAfterKeypress(event) {
            if (inputLength() > 0 && event.which ===13) { //this now looks to see if you hit "enter"/"return"
                //the 13 is the enter key's keycode, this could also be display by event.keyCode === 13
                createListElement();
            }   
        }
        
        
        enterButton.addEventListener("click",addListAfterClick);
        
        input.addEventListener("keypress", addListAfterKeypress);            
    

Take a look at the result. or download source code of To-do-task Manager

Do You have Ready Project?

Share It With Others. Submit Your Project & get Featured On Our Website.

Share

Share


More Great Articles