JavaScript Todo App Project

Hosted Project

JavaScript Todo App Project (Hosted on Github Pages)

Source Files

https://js-beginners.github.io/javascript-todo-project/ (Hosted on Github)

Project Objective

The objective of this JavaScript project is to create a todo application that uses local storage and allows for edits, among other things.

JavaScript Used

• DOM manipulations
• conditionals
• eventListeners
• CSS style manipulations
• functions…
• …pretty much all of the language

My Personalize Summary

Just like Mead's Note App Project, this todo app project can be found in Andrew Mead's Modern JavaScript course. As I stated previously, this is great course that I first completed in March of this year, but I wanted to go through it again so I could complete all 3 of his projects, again.

This todo application project is the project he builds to teach his students JavaScript. He builds the components during the notes app as he teaches JavaScript, and then he challenges his students to add similar features to this Todo app, which is built in conjunction.

New Things Learned or Refreshed

Again, as I stated about the notes app, going through this project again refreshed my knowledge on many things. The things that stand out are the uses of local storage, the eventlistener that the window object listens for when there is a change to local storage, the differences between the “change” and “input” event listeners, the window.location.assign method, and many, many more features of the language.

Time to Code

I can't really time this project since it was a follow-along that also including lots of stopping and starting. I just know that it was well worth my time and I'm confident that I could build it on my own if I wanted.

Your Turn!

What To Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js and other JavaScript files.
3. Implement the JavaScript code in your own files.
4. If you think you need to see a video solution first, be sure to pick up Mead's Modern JavaScript course.
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Todos App in action.

Need to see the video solution for this project? Get Andrew's The Modern JavaScript Course Now!