How to Build a Custom To-Do List with JavaScript

javascript to do list

We all lead a busy working life more or less. In this busy life, we often forget which work we have to do first and which one later. So if we have a to-do list or application then we have a lot of benefits. Our project today is to create a to-do list widget or tool. We used HTML CSS and JavaScript to create this widget. Before collecting the source code, have a look at the video tutorial below. In this video, we have shown how to create a to-do list app or widget using HTML, CSS, and JavaScript. Our YouTube channel has many videos on CSS animation examples, complete website design, JavaScript, and more. If you enjoy our videos then you can subscribe to our YouTube channel.

Javascript To Do List Video Tutorial:

I hope you have watched the video tutorial. A to-do list helps us in many ways. First, it helps organize tasks and priorities. Then it helps to manage time effectively. It helps reduce stress and increase productivity. By marking the task as complete, the user can get a clear idea of how much has been completed and how much is left. However, Our snippet is a basic one but you can add more functionality like you can add a progress bar underneath each task which will help you to identify how much work has been done.

You May Also Like:

How to Build a Custom To-Do List with JavaScript [ Source Code ]:

The first step is to create HTML and CSS files and link them properly. Add a separate js file and add that also. For this snippet, we have added the js code in the HTML file. Then, copy the codes from the two code boxes below and paste them into your files. If you have saved the code, you can test it in your browser. The source code is available to download in the button below if there is a problem.

ADD HTML:

<!DOCTYPE html>
<!-- divinectorweb.com -->
<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">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <title>Create To-Do list using javascript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrapper">
        <h1>To Do List</h1>
        <form id="task-area">
            <input type="text" id="single-task" placeholder="Add a new task...">
            <button type="submit">Add</button>
        </form>
        <ul id="tasks"></ul>
    </div>

    <script>
        const A = document.getElementById('task-area');
const B = document.getElementById('single-task');
const C = document.getElementById('tasks'); 

//Add a new task to the list

function addTask(event) {
    event.preventDefault();
    if (B.value === '') return;
    const task = createTask(B.value);
    C.appendChild(task);
    B.value = '';
}

//Create a new task element

function createTask(taskName) {
    const task = document.createElement('li');
    task.classList.add('task');
    task.innerHTML = `
        <input type="checkbox">
        <label>${taskName}</label>
        <span class="delete">×</span>
    `;

    //Add a delete button

    const deleteButton = task.querySelector('.delete');
    deleteButton.addEventListener('click', deleteTask);

    return task;
}

//Delete a task from the list

function deleteTask(event) {
    event.target.parentElement.remove();
}

A.addEventListener('submit', addTask);
    </script>
</body>
</html>

ADD CSS:

*{
    margin: 0;
    padding: 0; 
}
body{
    font-family: 'Montserrat', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(45deg,#e4245e,#f77168);
}
#wrapper{
    width: 35%;
    margin: 0 auto;
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
    padding: 50px;
    color: #fff;
    background: radial-gradient(#353a4a,#000);
}
#wrapper h1{
    text-transform: uppercase;
    margin-bottom: 5%;
}
#single-task{
    width: 353px;
    padding: 15px;
}
button{
    background: linear-gradient(45deg,#dc1599,#f99369);
    border: none;
    color: #fff;
    padding: 13px 18px;
    font-size: 18px;
}
.task{
    margin-bottom: 5px;
    margin-top: 20px;
    background: #fff;
    color: #000;
    list-style: none;
    padding: 0 15px;
    line-height: 35px;
}
.task input[type="checkbox"]{
    display: none;
}
.task .delete{
    color: red;
    cursor: pointer;
    font-size: 30px;
    margin: 0;
    float: right;
}

We hope the code of todo app javascript or todo app js is working for you. If you could share the content of the website with your friends, we would appreciate it. We're glad you visited us, and hope you find something useful on our site.

DOWNLOAD CODE

Post a Comment

Please Do not Enter any spam link in the comment box