Using closures to make a dynamic To-do list in Javascript - Web Development Series (Part 4)

Do you know the meme that everytime a developer sits down to do a side project, they go into this ‘let me build a tool to make this part of the process and then a tool to make that tool and so where ultimately they end up building a To-Do List’? :)

In fact there’s exactly the site that lets you try out building a To-Do list in different Javascript frameworks out there!

So what did I build as I just get my bearings with plain vanilla Javascript? A To-do List!!


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

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>The DOM</title>
  <link rel="stylesheet" href="../../base.css">

    <!-- What are these styles doing here? If you paused here, it is your homework.. hihhihhi-->
    img {
      transition: all 1s;

    .round {
      border-radius: 50%;
  <script src="todo-list.js"></script>



const list = document.createElement('ul');

const itemManager = () => {
  let index = 0;

  return {
     * Adds an item
    add() {
      const listItem = document.createElement('li');
      listItem.textContent = `Item ${(index += 1)}`;


     * Removes an item
    remove() {
      const listItem = document.querySelector('li');


const itemManagerInstance = itemManager();

// Add Button
const addButton = document.createElement('button');

addButton.innerHTML = `+`;
addButton.onclick = itemManagerInstance.add;


// Remove Button
const removeButton = document.createElement('button');

removeButton.innerHTML = `-`;
removeButton.onclick = itemManagerInstance.remove;


How to use?

I shared code for 2 files - index.html and todo-list.js. Copy the code lsitings into files named so and open the index.html in a browser! Both the files should be in the same directory. Here’s how it looks: Screenshot