Upgrading app.js

We will use ECMAScript modules, so open index.html and add type="module" to the script tag.

Add the following code:

globalThis.DOM = {};

// easy access within this file
const DOM = globalThis.DOM;

document.addEventListener('DOMContentLoaded', () => {
    // Create references we will need later
    DOM.todoList = document.getElementById('todo-list');
    DOM.addBtn = document.getElementById('add-btn');
    DOM.todoInput = document.getElementById('todo-input');

    // Event listeners
    DOM.addBtn.addEventListener('click', () => {
        // TODO
    });

    DOM.todoList.addEventListener('click', (event) => {
        if (event.target.classList.contains('delete-btn')) {
            // TODO
        }
    });

});

Folder structure

Create a folder webapp where we will put the rest of the JavaScript modules.