JavaScript Notes App Project

Hosted Project

JavaScript Notes App Project (Hosted on Github Pages)

Source Files

https://js-beginners.github.io/notes-app/ (Hosted on Github)

Project Objective

The objective of this JavaScript project is to create a notes 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

This notes app project can be found in Andrew Mead's Modern JavaScript course. 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 notes application project is the project he builds to teach his students JavaScript. He builds the components to it as he teaches JavaScript and then he challenges his students to add the similar feature to a Todo app, which is built in conjunction.

I really like the way he does this because it not only teaches a core component of JavaScript, it allows the student to immediate see how the component fits into the bigger picture of the JavaScript ecosystem.

New Things Learned or Refreshed

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.

In other words, I learned as much as I did the first time going through this course, but it was much better now that I am much more familiar with the JavaScript 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 Notes App in action.

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