By Vishal Basumatary in javascript — Mar 24, 2023

how to make a todo application in javascript

How to Make a Todo Application in JavaScript

Introduction

A todo application is a simple application that allows you to keep track of tasks or things that need to be done. You can use it to manage your personal tasks, your work tasks, or even your household chores. In this tutorial, we will learn how to make a todo application using JavaScript.

Step 1: Setting Up the HTML and CSS

The first step in creating a todo application is to create the HTML and CSS files. We will create a simple HTML file that contains a form where users can input their tasks. We will also add some basic CSS styles to make the application look good.


<!DOCTYPE html>
<html>
  <head>
    <title>Todo Application</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="app">
      <h1>Todo Application</h1>
      <form>
        <input type="text" name="task" placeholder="Enter task...">
        <button type="submit">Add</button>
      </form>
      <ul id="task-list"></ul>
    </div>
    <script src="app.js"></script>
  </body>
</html>

In the above code, we have created an HTML file that contains a form with an input field and a button. We have also created an unordered list where we will display the list of tasks. We have linked our CSS file and JavaScript file to this HTML file.

Step 2: Adding JavaScript Code

The next step is to add JavaScript code to our application. We will use JavaScript to handle the form submission and display the list of tasks.


const form = document.querySelector('form');
const input = document.querySelector('input');
const ul = document.querySelector('ul');

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const task = input.value;
  input.value = '';
  const li = document.createElement('li');
  li.textContent = task;
  ul.appendChild(li);
});

In the above code, we have selected the form, input field, and unordered list using the document.querySelector() method. We have added an event listener to the form that listens for the form submission event. When the user submits the form, we prevent the default behavior of the form submission using the preventDefault() method. We then get the value of the input field using the value property of the input field. We create a new list item using the createElement() method and set its text content to the task that we got from the input field. We append this list item to the unordered list using the appendChild() method.

Step 3: Saving Tasks in Local Storage

The next step is to save the tasks in local storage so that they persist even if the user closes the browser. We will use the localStorage object to save and retrieve the tasks from local storage.


const form = document.querySelector('form');
const input = document.querySelector('input');
const ul = document.querySelector('ul');
let tasks = [];

if (localStorage.getItem('tasks')) {
  tasks = JSON.parse(localStorage.getItem('tasks'));
  tasks.forEach((task) => {
    const li = document.createElement('li');
    li.textContent = task;
    ul.appendChild(li);
  });
}

form.addEventListener('submit', (e) => {
  e.preventDefault();
  const task = input.value;
  input.value = '';
  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));
  const li = document.createElement('li');
  li.textContent = task;
  ul.appendChild(li);
});

In the above code, we have initialized an empty array called tasks. We have also added a conditional statement that checks if there are any tasks saved in local storage. If there are, we retrieve them using the getItem() method of localStorage and parse them using the JSON.parse() method. We then loop through each task and create a new list item for each task and append it to the unordered list.

We have also modified the event listener for the form submission. When the user submits the form, we add the task to the tasks array and save it in local storage using the setItem() method of localStorage. We then create a new list item for the task and append it to the unordered list.

Conclusion

In this tutorial, we learned how to make a todo application using JavaScript. We created a simple HTML file that contains a form and an unordered list. We used JavaScript to handle the form submission and display the list of tasks. We also saved the tasks in local storage so that they persist even if the user closes the browser. This is just one way to create a todo application using JavaScript. There are many other ways to do it depending on your requirements.