DEV Community

loading...
Cover image for Making a TO-DO list web app using simple JavaScript

Making a TO-DO list web app using simple JavaScript

miljkovicjovan profile image Jovan M. ・3 min read

In this tutorial I will show you how to make a tool that I use almost every day. It is a TO-DO list making web app. It helps me to organise and plan out my day. It makes for a great beginner project for JavaScript.

Here you can find the Source Code

Setting up the base HTML

<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width:device-width, initial-scale:1.0">
    <title>to-do</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>To - Do</h1>

        <div class="col-12">
            <input id="userInput" type="text" placeholder="New item..." maxlength="150">
            <button id="enter"></button>
        </div>


        <div class="listItems col-12">
            <ul class="col-12 offset-0 col-sm-8 offset-sm-2"></ul>
        </div>

    </div>

    <script type="text/javascript" src="external.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

As you can see we have an ul element with no list items. The list items will be created when the button is entered. We will achieve this with the JavaScript code.

JavaScript logic

1.First let's set up the variables we will use

var enterButton = document.getElementById("enter");
var input = document.getElementById("userInput");
var ul = document.querySelector("ul");
var item = document.getElementsByTagName("li");
Enter fullscreen mode Exit fullscreen mode

2.Make functions that calculate length of input and li

function inputLength(){
    return input.value.length;
} 

function listLength(){
    return item.length;
}
Enter fullscreen mode Exit fullscreen mode

3.Make the function that creates the list element

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);//when the li is clicked is marked done with the crossOut() function
    //END STRIKETHROUGH


    // START ADD DELETE BUTTON
    var dBtn = document.createElement("button");
    dBtn.appendChild(document.createTextNode("X"));
    li.appendChild(dBtn);
    dBtn.addEventListener("click", deleteListItem);//when X is clicked the li is deleted
    // END ADD DELETE BUTTON


    //ADD CLASS DELETE (DISPLAY: NONE)
    function deleteListItem(){
        li.classList.add("delete")//this is a class that makes display: none; of the li 
    }
    //END ADD CLASS DELETE
}
Enter fullscreen mode Exit fullscreen mode

This function makes an li element and appends it to the ul element. This function also allows for the highlight affect. And adds the button to delete the list item.

4.Make functions and event listeners that will run the CreateListItem function when Enter clicked or button clicked.

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);
Enter fullscreen mode Exit fullscreen mode

Style with CSS

Here is the code I used, I went for a simple look to make my routine easier you can choose to do whatever you want in this part since the important code is finished.

body {
    background: #04A1BF;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
}


h1 {
    padding-top: 1rem;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 4rem;
}

#enter {
    border: none;
    padding: 7px 18px;
    border-radius: 7px;
    color: #04A1BF;
    background-color: #025F70;
    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;
}

#enter:hover{
    background-color: #02798F;
    color: #FFCD5D;
}

ul {
    text-align: left;
    margin-top: 20px;
}


li {
    list-style: none;
    padding: 10px 20px;
    color: #ffffff;
    text-transform: capitalize;
    font-weight: 600;
    border: 2px solid #025f70;
    border-radius: 5px;
    margin-bottom: 10px;
    background: #4EB9CD;
    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;
}

li:hover {
    background: #76CFE0;
}

li > button {
    font-weight: normal;
    background: none;
    border: none;
    float: right;
    color: #025f70;
    font-weight: 800;
}

input {
    border-radius: 5px;
    min-width: 65%;
    padding: 10px;
    border: none;
}

.done {
    background: #51DF70 !important;
    color: #00891E;
}

.delete {
    display: none;
}
Enter fullscreen mode Exit fullscreen mode

The important points in the CSS file are the classes and ids of the buttons and list items. Make sure to make them stand out when doing this.

Thank you for reading

Hope this helps someone, if it didn't comment down bellow the problem you have and I will reach out.
Thank you again,
Stay safe,
~Jovan

Discussion (0)

pic
Editor guide