

We need an array to store all the to-do tasks.

This is how our app looks after designing:Ĭonst text = document.getElementById( "text") Ĭonst addTaskButton = document.getElementById( "add-task-btn") Ĭonst saveTaskButton = document.getElementById( "save-todo-btn") Ĭonst listBox = document.getElementById( "listBox") Ĭonst saveInd = document.getElementById( "saveIndex") You can use TailwindCSS in your project by importing the CSS file from the CDN. The input elements and the buttons have their respective ids in order to get access to these elements in the JavaScript file.įor the frontend design, this article uses TailwindCSS, a utility CSS framework. Let’s have a look at the HTML layout of this project.

Building the Layout Using HTML and TailwindCSS
