The goal of this project is to practice JavaScript and its paradigms by creating a TODO app. This app should be able to add TODOs and track the number of total TODOs as well as the number of unchecked TODOs.
Inside of index.html, you'll find some starter HTML. You shouldn't
need to edit this file at all. Open this file on your computer into any browser
to run the project. Make sure that script.js and styles.css
are in the same local directory. With the file open in your browser, you should
see a New TODO button, which alerts when clicked. Your goal will be to get
this button to create new TODOs.
Inside styles.css, you'll find some pre-written CSS for your convenience. You shouldn't need to edit this file at all, but feel free to if desired.
script.js is where most of your work will be done. There is some
starter code for you in the file. The classNames variable can be used to link
any elements you create in js with the associated CSS class names. The next 3
lines of code are the HTML elements that you'll need to update when creating new
TODOs. Lastly, you'll see the addTodo() function. This gets executed when
creating a new TODO. You should replace the alert() call with logic to create
new TODOs.
Good luck!
If you finish early and are up for a challenge, try adding delete functionality. This should be in the form of a button within each TODO that removes that TODO when clicked.