Create a TODO list design using javascript, html, css

/ CSS, Development, HTML, Interview Questions, Javascript, Website Design

This is a simple todo application design using html, css and vanilla javascript.

You will need an editor of your choice to begin with. I usually use vscode with Liveserver extension which helps to view developed application in the browser.

First step is to create an html page which will display the todo list.

Create an index.html page which includes:

  1. Form component which includes – input text field with id=”input” and class=”input”
  2. <ul> element which will add a <li> to the todo list when added from the input text field
  3. Include style.css in the <head> section of the html code
  4. Include script.js just above the closing body tag

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Frontend design to create a TODO List using localStorage</title>
  </head>
  <body>
    <h1>TODO List</h1>
    <p>To toggle a task -> Left Click</p>
    <p>To delete a task -> Right Click<p>
    <form id="form">
        <input type="text" class="input" id="input" placeholder="Enter task details and click enter" />
        <ul id="todos" class="todos"></ul>
    </form>
    <script src="script.js"></script>
  </body>
</html>

Second step is to create the javascript code to insert the <li> todo task into the DOM when user enter some text in the input text field and click enter.

  1. Get all the elements for the ids “form” “input” and “todos” and assign to a const variable. These variables will be used later in the application.
  2. Use localStorage to store the todos
  3. Check if there is any todo in localStorage and add them to the list
  4.  Add todo addEventListener on enter key press
  5. Create a function to add todo to the list

script.js

const form = document.getElementById("form");
const input = document.getElementById("input");
const todosList = document.getElementById("todos");

//Use localStorage to store todos
const todos = JSON.parse(localStorage.getItem("todos")) || [];

// Check if there is any todo in localStorage and add them to the list
if(todos) {
    todos.forEach(todo => addTodo(todo));
}

// Add todo on enter key press
form.addEventListener('submit', (e) => {
    e.preventDefault();
    addTodo();
});

// Create a function to add todo to the list
function addTodo(todo) {
    let todoText = input.value;
    if(todo) {
        todoText = todo.text
    }
    if(todoText) {
        // Create a li for adding the todo list
        const todoEl = document.createElement('li');
        if(todo && todo.completed) {
            //Add completed class to the li
            todoEl.classList.add('completed');
        }
        todoEl.innerText = todoText;
        //Add click event listener to the li to toggle the completed class
        todoEl.addEventListener('click', () => {
            todoEl.classList.toggle('completed');
            updateList();
        });
        //Add delete event listener to the li to delete the li
        todoEl.addEventListener('contextmenu', (e) => {
            e.preventDefault();
            todoEl.remove();
            updateList();
        });
        //Add the li to the existng list
        todosList.appendChild(todoEl);
        input.value = '';
        //Update the localStorage
        updateList();
    }
}

function updateList() {
    //Get all the todos from the list
    todosEl = document.querySelectorAll('li');
    const todos = [];
    //Loop through the todos and add them to the todos array
    todosEl.forEach(todoEl => {
        todos.push({
            text: todoEl.innerText,
            completed: todoEl.classList.contains('completed')
        })
    });
    //Store the todos in the localStorage and stringify it
    localStorage.setItem('todos', JSON.stringify(todos))
}

In third step, here are some styles to format the page, show list as completed with the completed class.

style.css

* {
    box-sizing: border-box;
  }
  
  body {
    background-color: #f5f5f54b;
    color: rgb(31, 28, 28);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  h1 {
    color: rgb(23, 14, 104);
    font-size: 3rem;
    text-align: center;
  }
  
  form {
    box-shadow: 0 5px 12px rgba(151, 150, 150, 0.1);
    max-width: 100%;
    width: 400px;
  }
  
  .input {
    border: none;
    color:  rgba(116, 112, 112, 0.644);
    font-size: 1rem;
    padding: 1rem 2rem;
    display: block;
    width: 100%;
  }
  
  .input::placeholder {
    color: #a3a2a2;
  }
  
  .input:focus {
    outline-color: rgb(23, 14, 104);
  }
  
  .todos {
    background-color: #fff;
    padding: 0;
    margin: 0;
    list-style-type: none;
  }
  
  .todos li {
    border-top: 1px solid #e5e5e5;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 1rem 2rem;
  }
  
  .todos li.completed {
    color:rgb(23, 14, 104);
    text-decoration: line-through;
  }

Thank you for reading through the design of simple todo list application using html, css and vanilla javascript.

If you have any questions or suggestions feel free to send me a message.

Full code can be downloaded from my github repo here.