You are currently viewing Create a To-Do List Using HTML, CSS, & JavaScript

Create a To-Do List Using HTML, CSS, & JavaScript

Create a To-Do List Using HTML, CSS, & JavaScript

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn to Create a To-Do List Using HTML, CSS, & JavaScript which is a physical reminder for the people who just forget to do their essential activity in a day so they prepare a list and act according to that.

In Today’s session, We will use HTML, CSS, and JavaScript to complete this Project. The HTML (Hypertext Markup Language) will help us to create the structure for the list with some necessary attributes and elements.

Then we will use CSS (Cascading Stylesheet) which will help us to style or design the project with suitable padding and alignment. At last, we will use JS (JavaScript) which will add logic to make the project responsive from the user end.

I hope you have got an idea about the project.

HTML Code for To-Do List

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Simple To Do List</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <!--Font Awesome CDN-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="newtask">
            <input type="text" placeholder="Task to be done..">
            <button id="push">Add</button>
        </div>
        <div id="tasks"></div>
    </div>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>

First, we’ll start with creating the structure of the project for that as you can see in the above code we have used all the necessary elements & attributes. Let us know code the CSS part to add styling and aligned the tags.

Palindrome Checker using HTML, CSS and JavaScript

CSS Code for To-Do List

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #8052ec,
        #d161ff
    );
}
.container{
    width: 40%;
    min-width: 450px;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 30px;
    padding: 30px 40px;
}
#newtask{
    position: relative;
    background-color: #ffffff;
    padding: 30px 20px;
    border-radius: 5px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
#newtask input{
    width: 70%;
    width: 70%;
    height: 45px;
    font-family: 'Poppins',sans-serif;
    font-size: 15px;
    border: 2px solid #d1d3d4;
    padding: 12px;
    color: #111111;
    font-weight: 500;
    position: relative;
    border-radius: 5px;
}
#newtask input:focus{
    outline: none;
    border-color: #8052ec;
}

#newtask button{
    position: relative;
    float: right;
    width: 20%;
    height: 45px;
    border-radius: 5px;
    font-family: 'Poppins',sans-serif;
    font-weight: 500;
    font-size: 16px;
    background-color: #8052ec;
    border: none;
    color: #ffffff;
    cursor: pointer;
    outline: none;
}
#tasks{
    background-color: #ffffff;
    padding: 30px 20px;
    margin-top: 60px;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    width: 100%;
    position: relative;
}
.task{
    background-color: #ffffff;
    height: 50px;
    padding: 5px 10px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #d1d3d4;
    cursor: pointer;
}
.task span{
    font-family: 'Poppins',sans-serif;
    font-size: 15px;
    font-weight: 400;
}
.task button{
    background-color: #8052ec;
    color: #ffffff;
    height: 100%;
    width: 40px;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    outline: none;
}
.completed{
    text-decoration: line-through;
}

Second, comes the CSS code which we have styled for the structure we have padded as well as aligned the project so that it is properly situated and doesn’t get messy with suitable CSS elements. Now, let’s code the JavaScript part to make it responsive.

RGB to hex and hex to RGB Converter using JavaScript

JavaScript Code for To-Do List

document.querySelector('#push').onclick = function(){
    if(document.querySelector('#newtask input').value.length == 0){
        alert("Please Enter a Task")
    }
    else{
        document.querySelector('#tasks').innerHTML += `
            <div class="task">
                <span id="taskname">
                    ${document.querySelector('#newtask input').value}
                </span>
                <button class="delete">
                    <i class="far fa-trash-alt"></i>
                </button>
            </div>
        `;

        var current_tasks = document.querySelectorAll(".delete");
        for(var i=0; i<current_tasks.length; i++){
            current_tasks[i].onclick = function(){
                this.parentNode.remove();
            }
        }

        var tasks = document.querySelectorAll(".task");
        for(var i=0; i<tasks.length; i++){
            tasks[i].onclick = function(){
                this.classList.toggle('completed');
            }
        }

        document.querySelector("#newtask input").value = "";
    }
}

The last stage of the project the JavaScript in which we added the logic and coded as per the requirement with some conditions also a function is defined to delete the input in the list. Let us see the Final Output of the project how to Create a To-Do List Using HTML, CSS, & JavaScript.

Final Output

We have successfully created our Create a To-Do List using HTML, CSS, & JavaScript. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

If you find out this Blog helpful, then make sure to search codewithrandom on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Happy Learning!!!

Code Idea – codingartist

Written By – Harsh Sawant

Code By – @harshh9

Leave a Reply