Creating a ToDo application in Vanilla JavaScript

You will learn a lot by creating a to-do application. You will learn how can you manipulate the DOM, create a new HTML element, adding a new HTML element in the DOM.

Setting up the project
Let's build the application 👏
Live Demo
Source Code

Setting up the project

I am using VSCode editor to edit the source code and Live Server Extension to see the changes live in the browser.

First of all, let us create a folder.

mkdir todo-vanilla-js

Now, let's create the HTML and JS file.

cd todo-vanilla-js
touch index.html
touch index.js

I am not going to use CSS, because I want to focus only on JavaScript

Paste the following content in HTML file

<!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" />
    <script src="index.js"></script>
    <title>ToDo Vanilla</title>
  </head>
  <body onload="init()">
    <h1>ToDo Application - Created in Vanilla JS :)</h1>
    <h3>Your Tasks</h3>
    <ol id="todos"></ol>
    <p id="empty-todo-msg">You don't have any pending tasks :)</p>
    <button style="height: 30px; width: 50px" id="create-todo">+</button>
  </body>
</html>

Paste the following content in JavaScript file

function init() {
  console.log("Let's create a ToDo App");
}

When you open the HTML file in the browser, then you'll see something like
todo application image

Let's build the application 👏

Let's start building the application.

Create new todo

First, we will allow the user to create a new todo.
Creating a todo

User will open the page
He/She will click on the plus button to create a todo
Write a todo
Press Enter

Complete the `init()` function

Let's complete the init() function. As we discussed earlier, the responsibility of this function will be to initialize everything.

Utility functions

// utility functions to get the elements
const getMsg = () => document.getElementById("empty-todo-msg");
const getToDos = () => document.getElementById("todos");
const getToDoButton = () => document.getElementById("create-todo");

/**
 * This function will be called when the page will load for the first time.
 */
function init() {
  const todoButton = getToDoButton();
  todoButton.addEventListener("click", createToDo);
}

Now, when the user will click on the + button, then the createToDo function will be triggered.

`createToDo()`

This function will take input from the user and add a todo in the UI.

function createToDo() {
  const todo = prompt("Enter your todo");

  // in case user pressed cancel
  if (!todo) return;

  addToDo(todo);
  hideEmptyMsg();
}

/**
 * Get a todo string and create a new todo  in the list
 * @param {String} todo new todo
 */
function addToDo(todo) {
  // get todo container
  const todoList = getToDos();
  
  // create a new todo
  const newToDo = document.createElement("li");
  newToDo.innerText = todo;
  
  // append the todo in the UI
  todoList.appendChild(newToDo);
}

/**
 * Hide empty message from DOM, where there is at least one todo in the list
 */
function hideEmptyMsg() {
  const msg = getMsg();
  msg.style.display = "none";
}

Live Demo

https://todo-vanila-js.netlify.app

Source Code

https://github.com/ats1999/todo-vanila-js

JavaScript

NodeJs