Create your Own To-Do List App with Just CSS, HTML, & JavaScript | Devhubspot

UI design CSS Html javascript

Hey friends, today in this blog, you’ll learn how to create a complete Todo List App in HTML CSS & JavaScript. Crud operation means to create, read, and delete. If you’re an absolute beginner, this to-do will be a little bit difficult for you to create.

For beginners, you can try to create this easy Todo List App in JavaScript. In this todo, there are no features for completing tasks so, it will be easy for you to create than the current one.

If you don’t know, the to-do list app is a list of things that need to be done or want to be done. Okay, without further delay, let’s back to this project.

Steps For Creating To-Do List

To create a To-Do using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the To-Do.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>To-Do List App - Devhubspot</title>
        <link rel="stylesheet" href="./styles.css">
    </head>
    <body>
        <div class="container">
            <div class="todo-app">
                <h2>To-Do List</h2>
                <div class="row">
                    <input type="text" id="input-box" placeholder="Add your task">
                    <button onclick="addTask()">Add</button>
                </div>
                <ul id="list-container">
                    <!-- <li class="checked">Task 1</li>
                    <li class="">Task 1</li> -->
                </ul>
            </div>
        </div>
    </body>

    <script src="./script.js"></script>
</html>

Next, add the following CSS codes to your style.css file to style the captcha generator and make it interactive and beautiful.

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
.container{
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #5473cf, #2b2562);
    padding: 10px;
}

.todo-app{
    width: 100%;
    max-width: 600px;
    background-color: #fff;
    margin: 100px auto 20px;
    padding: 40px 30px 70px;
    border-radius: 10px;
}
.todo-app h2{
    color: #5473cf;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ededed;
    border-radius: 30px;
    padding-left: 20px;
    margin-bottom: 24px;
}
input{
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 10px;
    font-size: 14px;
}
button{
 border: none;
 outline: none;
 padding: 16px 50px;
 background: #5473cf;
 color: #fff;   
 font-size: 16px;
 cursor: pointer;
 border-radius: 40px;
}
ul li{
    list-style: none;
    font-size: 16px;
    padding: 12px 8px 12px 50px;
    user-select: none;
    cursor: pointer;
    position: relative;
}

ul li::before{
    content: '';
    position: absolute;
    height: 28px;
    width: 28px;
    background-image: url('images/unchecked.png');
    background-size: cover;
    background-position: center;
    top: 8px;
    left: 8px;
}

ul li.checked{
   color: #5473cf;
   text-decoration: line-through;
}

ul li.checked::before{
    background-image: url('images/checked.png');
}
ul li span{
    position: absolute;
    right: 0;
    top: 5px;
    width: 40px;
    color: #555;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
}
ul li span:hover{
    background: #5473cf;
    color: #fff;
}

Finally, add the following JavaScript code to your script.js file to make the to dynamic list and delete or manage locally

const inputBox = document.getElementById("input-box");
const listContainer = document.getElementById("list-container");

function addTask(){
    if(!inputBox.value){
        return alert("You must write something!");
    }
    let li = document.createElement("li");
    li.innerHTML = inputBox.value;
    listContainer.appendChild(li);
    let span = document.createElement("span");
    span.innerHTML = "\u00d7";
    li.appendChild(span);
    inputBox.value = "";
    storeDate();
}

listContainer.addEventListener("click", function(e){

    if(e.target.tagName === "LI"){
        e.target.classList.toggle("checked");
        storeDate();
    }else if(e.target.tagName === "SPAN"){
        e.target.parentElement.remove();
        storeDate();
    }

}, false);

function storeDate(){
    localStorage.setItem("todaData", listContainer.innerHTML);
}

function showTask(){
    listContainer.innerHTML = localStorage.getItem("todaData");
}
showTask();

Conclusion

With HTML, CSS, and JavaScript, I aim to have shown you how to create your own To-do App list. You may modify your generator to suit your demands because the coding procedure is straightforward and simple to grasp.