Build a To Do List Using HTML, CSS, & JavaScript

Build a To Do List Using HTML, CSS, & JavaScript

 

In this tutorial, we will be building a To-Do List using HTML, CSS, and JavaScript. If you are a beginner and tired of studying from boring theoretical tutorials then you are in the right place because here we will practically build this To-Do from scratch.

The to-do list we’ll build in this tutorial will be pretty basic. A user can add a task, mark a task as completed, and delete an already added task. I’ll explain how to build each feature, but you must follow along by typing the code and running it on your end to get the most out of this tutorial.

Digital To-Do List in JavaScript [Source Codes]

To create this program [To Do List]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript To Do List</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
</head>
    <div class="container">
        <div class="header">
            <div class="clear">
                <h2 id="title">
                    To Do List App
                </h2>
                <i class="fas fa-sync-alt"></i>
            </div>
            <div id="date"></div>
        </div>
        <div class="content">
            <div id="list"></div>
            <div class="add-item">
                <input type="text" placeholder="Add a To-Do">
                <i class="fas fa-plus-circle" id="push"></i>
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: #d1dfec;
}

.container {
    position: absolute;
    width: 325px;
    background: #15161a;
    padding: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.header {
    position: relative;
    height: 200px;
    padding: 20px;
}

.clear {
    padding: 0 10px;
    width: 100%;
    height: 180px;
    font-size: 30px;
    color: #fff;
    text-align: right;
}

#title {
    position: absolute;
    font-size: 25px;
    font-weight: 500;
    text-align: left;
}

#date {
    width: 100%;
    font-size: 21px;
    font-weight: bold;
    color: #fff;
    text-align: center;
}

.content {
    height: 100%;
    min-height: 300px;
    margin-top: 50px;
}

#list {
    height: 90%;
    min-height: 290px;
    border-bottom: 2px solid #8052ec;
}

.add-item {
    height: 100%;
    min-height: 40px;
    padding: 8px;
    color: #8052ec;
}

input[type=text] {
    width: 87%;
    height: 40px;
    display: inline;
    padding: 10px;
    border: none;
    font-size: 18px;
    background: #15161a;
}

input[type=text]::placeholder {
    color: #fff;
}

.add-item .fas {
    display: inline-block;
    font-size: 34px;
    margin-top: 7px;
}

.fas {
    cursor: pointer;
    transition: .1s linear;
}

.fas:hover {
    transform: scale(1.2);
}

.list {
    position: relative;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding: 5px 20px;
}

.list span {
    margin: 0 0 0 20px;
    color: #fff;
    cursor: pointer;
}

.list button {
    width: 40px;
    height: 100%;
    border: none;
    border-radius: 50px;
    background: #8052ec;
    color: #fff;
    outline: none;
    cursor: pointer;
}

.list::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 15px;
    left: 15px;
    background: #d1d3d4;
    font-size: 15px;
    text-align: center;
    border-radius: 50px;
}

.complete {
    text-decoration: line-through;
    color: #ccc;
}

.complete::after {
    content: "\2713";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 15px;
    left: 15px;
    background: green;
    font-size: 15px;
    text-align: center;
    border-radius: 50px;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

var date = document.getElementById('date');
var clear = document.querySelector(".clear");
// show today date
const options = {weekday:'long',
                  month:'long',
                  day:'numeric'};

const today = new Date();
date.innerHTML = 
today.toDateString("en-us", options);

// clear list

clear.addEventListener('click', function() {
    var child = list.lastElementChild;
    while (child) {
        list.removeChild(child);
        child = list.lastElementChild;
    }
})

// list function

document.querySelector('#push').onclick =
function() {
    if (document.querySelector('.add-item input')
    .value.length == 0) {
        alert ("please anter a list");
    } else {
        document.querySelector('#list').
        innerHTML += `
        <div class="list">
        <span id="listname">
        ${document.querySelector('.add-item input').value}
        </span>
        <button class="delete">
        <i class="far fa-trash-alt"></i>
        </button>
        </div>`;

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

        var current_list = document.
        querySelectorAll('.list');
        for (var i = 0; i < current_list.length; i++) {
            current_list[i].onclick = function () {
                this.classList.toggle('complete');
            }
        }
        document.querySelector('.add-item input')
        .value = "";
    }
}

Download Source Code: Build a  To-Do List Using HTML, CSS, & JavaScript

That’s all, now you’ve successfully Create a To-Do List In HTML, CSS, Javascript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the To-Do List in HTML, CSS, javascript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!