Tutorials Tonight's Logo

To Do List Javascript

To-Do list app is one of the beginner projects that you must create to learn basic methods to control the webpage on the user's action and make it interactive.

In this article we are going to create a basic to-do list app in javascript where you can:

Here is the final to-do list app you are going to make.

Prerequisites: Before proceeding with this section you need to have a basic understanding of HTML, CSS and Javascript.

To Do List tutorials in javascript

Making To-Do List App

To-do list helps us to create a record of the task to be done and the task that is completed. Creating this app will be a small step to create dynamic webpages.

We will go through creating and understanding 3 different sections first for HTML then CSS and finally for javascript.

Our complete app will look like something as shown in the picture below.

to do list app in javascript

HTML code for TO DO List App

To start with creating the app first create a container that holds the app and to position it on the webpage.

Creating outline:

Then create a <div> element with class name 'app' for the app, this will help us to style the app elements using CSS.

Create a header for the app inside an element with the class 'app'.

<div class="container">
  <div class="app">
    <h2>To DO List</h2>
  </div>
</div>

Form creation for writing task

Now to take tasks as an input you need to create a form with a text input and a submit button.

On the submit button create an onclick event that will be used as an event listener which will run a javascript function when it is clicked.

Also, add return false to it to prevent page refresh because the default action of form submission is page refresh and we don’t want to refresh the page.

<form>
  <input type="text" placeholder="Add new task...">
  <button type="submit" onclick="addTask();return false">&plus;</button>
</form>

Create task list:

Create a list an element (<ul>) inside element with class 'app', which will list our all to-do tasks.

Inside <ul> element we will have our list of tasks.

Each task contain 3 section:

  1. Checkbox: To mark the completed task. Create a checkbox
  2. Span element: To show the task
  3. Trash button: To delete the task. Create a trash icon using font-awesome.

To check if the task is complete create an onclick event which will listen whether the task is complete or not, also add another onclick event to delete the task.

<ul>
  <li>
    <input type="checkbox" onclick="taskComplete(this)">
    <span>Exercise</span>
    <i class="fa fa-trash" onclick="removeTask(this)"></i>
  </li>
</ul>

Complete HTML Code:

<div class="container">
  <div class="app">
    <h2>TO DO LIST</h2>
    <form>
      <input type="text" placeholder="Add new task...">
      <button type="submit" onclick="addTask();return false">&plus;</button>
    </form>
    <ul>
      <li>
        <input type="checkbox" onclick="taskComplete(this)">
        <span>Exercise</span>
        <i class="fa fa-trash" onclick="removeTask(this)"></i>
      </li>
    </ul>
  </div>
</div>

HTML Output:

to do list html output

CSS Code For TO DO List App

Now let's style the to-do list app using CSS.

First, select the 'container' class, it is the first element we had created and it holds our app. Use flexbox to centre it's child horizontally, give some padding and background color.

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 50px;
  background-color: #e1e3ea;
  height: 100vh;
  font-family: sans-serif;
}

Style 'app' element:

Create a CSS class with the name 'app' and give it a width of 60% for device size more that 768px and 90% for device size less than 768px using media query.

This will help the app to resize itself according to a different device.

.app {
  width: 60%;
}

@media (max-width:768px) {
  .app {
    width: 90%;
  }
}

Style the heading:

To make the to-do app you should make heading attractive.

You can use a different font for it. For this, you can import a google font as shown in the code below.

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

.app h2 {
  color: white;
  font-size: 40px;
  padding: 10px 0;
  text-align: center;
  border-radius: .5rem .5rem 0 0;
  background-color: #de3f53;
  font-family: 'Rajdhani', sans-serif;
}

Styling form and input:

Use flexbox to flow the form elements in columns and give 10% width to it.

Provide basic colour, padding and other properties to input and submit button and give 90% width to input and 10% width to submit button.

.app form {
  display: flex;
  width: 100%;
  background-color: #262e4c;
}

.app form input {
  border: none;
  background-color: #3c4979;
  font-size: 18px;
  color: white;
  padding: 10px;
  width: 90%;
}

.app form button {
  border: none;
  color: white;
  background-color: #1dd2af;
  font-size: 25px;
  font-weight: 600;
  height: 42px;
  width: 10%;
}

Styling list elements:

Now style the list elements that is our task. Each task element contains 3 different elements inside it.

Select <ul> tag and remove the default bullets to it by using list-style: none.

Select the checkbox by .app ul li input CSS selector and remove original look and style it to look round using the given code below.

For checked box give different background color. i.e. background-color: #1dd2af;

Push the trash button to the right of the task using float: right property.

.app ul {
  list-style: none;
  color: #e0e0e0;
  padding: 0;
}

.app ul li {
  padding: 10px;
  background-color: #262e4c;
  border-bottom: 1px solid #3a4674;
}

.app ul li input {
  width: 0.8em;
  height: 0.8em;
  cursor: pointer;
  border-radius: 50%;
  background-color: white;
  border: 1px solid rgb(255, 255, 255);
  -webkit-appearance: none;
}

.app ul li input:checked {
  background-color: #1dd2af;
}

.app ul li span {
  font-size: 18px;
  padding: 0 10px;
}

.app ul li i {
  float: right;
  cursor: pointer;
}

.app ul li i:hover {
  color: rgb(255, 82, 82);
}

Style the completed task:

For the task which is completed, we have to make it look different. So create a class 'complete' and add necessary CSS properties, which we will add to the task which is completed.

.complete {
  color: rgba(192, 192, 192, 0.842);
  text-decoration: line-through;
}

JavaScript For To Do List App

The javascript code for the to-do list app is mainly divided into 3 different functions.

Function to add the task

To add new task first create a javascript function with name 'addTask'.

Within the function first, select two elements the form input and <ul> element which list the tasks.

This function will run when the user click button to add new task so first check if the task is empty if task given is empty then alert a message and return.

If the task is not empty then create a new li element and set its innerHTML with the HTML code for list element and put the task value in it using backticks.

Now append the created list element at the start of the list by using insertBefore method.

Finally, clear the input section for the next task to be added.

function addTask() {
  const task = document.querySelector('form input');
  const list = document.querySelector('ul');
  if (task.value === "") {
    alert("Please add some task!");
    return;
  }
  const li = document.createElement('li');
  li.innerHTML = `<input type="checkbox" onclick="taskComplete(this)">
                  <span>${task.value}</span>
                  <i class="fa fa-trash" onclick="removeTask(this)"></i>`;
  list.insertBefore(li, list.children[0]);
  task.value = "";
}

Function to mark complete task

The taskComplete function marks the task as completed task.

The function basically toggles a CSS class 'complete' on the <span> element of the list using the toggle method via classList property of the element.

The event parameter of the function is a reference to the element clicked, which is a checkbox.

We have checkbox which is event element, now select its next element sibling by nextElementSibling property and toggle the class named 'complete' over it.

function taskComplete(event) {
  event.nextElementSibling.classList.toggle("complete");
}

Function to delete the complete task

The trash button is used here to delete the task. Same as previous function the event parameter point to the trash button.

From trash button select its parent element which is list element and apply remove function over it which removes the element from the document.

function removeTask(event) {
  event.parentElement.remove();
}

Source code of TO Do List App

Here is the complete source code of to-do list app.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>To DO List</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap');

    * {
      margin: 0
    }

    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 50px;
      background-color: #e1e3ea;
      height: 100vh;
      font-family: sans-serif;
    }

    .app {
      width: 60%;
    }

    @media (max-width:768px) {
      .app {
        width: 90%;
      }
    }

    .app h2 {
      color: white;
      font-size: 40px;
      padding: 10px 0;
      text-align: center;
      border-radius: .5rem .5rem 0 0;
      background-color: #de3f53;
      font-family: 'Rajdhani', sans-serif;
    }

    .app form {
      display: flex;
      width: 100%;
      background-color: #262e4c;
    }

    .app form input {
      border: none;
      background-color: #3c4979;
      font-size: 18px;
      color: white;
      padding: 10px;
      width: 90%;
    }

    .app form button {
      border: none;
      color: white;
      background-color: #1dd2af;
      font-size: 25px;
      font-weight: 600;
      height: 42px;
      width: 10%;
    }

    .app ul {
      list-style: none;
      color: #e0e0e0;
      padding: 0;
    }

    .app ul li {
      padding: 10px;
      background-color: #262e4c;
      border-bottom: 1px solid #3a4674;
    }

    .app ul li input {
      width: 0.8em;
      height: 0.8em;
      cursor: pointer;
      border-radius: 50%;
      background-color: white;
      border: 1px solid rgb(255, 255, 255);
      -webkit-appearance: none;
    }

    .app ul li input:checked {
      background-color: #1dd2af;
    }

    .app ul li span {
      font-size: 18px;
      padding: 0 10px;
    }

    .app ul li i {
      float: right;
      cursor: pointer;
    }

    .app ul li i:hover {
      color: rgb(255, 82, 82);
    }

    .complete {
      color: rgba(192, 192, 192, 0.842);
      text-decoration: line-through;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="app">
      <h2>TO DO LIST</h2>
      <form>
        <input type="text" placeholder="Add new task...">
        <button type="submit" onclick="addTask();return false">&plus;</button>
      </form>
      <ul>
        <li>
          <input type="checkbox" onclick="taskComplete(this)">
          <span>Exercise</span>
          <i class="fa fa-trash" onclick="removeTask(this)"></i>
        </li>
      </ul>
    </div>
  </div>

  <script>
    function addTask() {
      const task = document.querySelector('form input');
      const list = document.querySelector('ul');
      if (task.value === "") {
        alert("Please add some task!");
        return;
      }
      const li = document.createElement('li');
      li.innerHTML = `<input type="checkbox" onclick="taskComplete(this)">
                      <span>${task.value}</span>
                      <i class="fa fa-trash" onclick="removeTask(this)"></i>`;
      list.insertBefore(li, list.children[0]);
      task.value = "";
    }
    function taskComplete(event) {
      event.nextElementSibling.classList.toggle("complete");
    }
    function removeTask(event) {
      event.parentElement.remove();
    }
  </script>
</body>

</html>
Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.