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.