Build a Notes App with JavaScript & Local Storage (No Frameworks)

View the Code & GitHub Repository:

In today's video, we'll be creating a Notes App using only JavaScript and Local Storage. This project is perfect if you've got some JavaScript knowledge under your belt and want to learn new ways to structure an app like this.

The code for this makes use of the following HTML, CSS, JS features: Local Storage, ES6 Import/Export Syntax, Classes, Arrow Functions, Static Methods, Callback Functions, Event Listeners, QuerySelector, GetElementById, Template Strings, Class List, CSS Psuedo-Classes, Flexbox and HTML5 Data Attributes.

View/Download the CODE:

Chapters:
0:00 Overview & Demo
1:46 HTML
6:27 JavaScript: Local Storage API
19:06 JavaScript: Building the View
48:50 JavaScript: Finalizing Everything
1:02:23 Outro

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #html

[dcode-software]

*MORE JAVASCRIPT PROJECT IDEAS:*

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[omarajem]

Please keep making this type of video on structuring the code without frameworks.
I have worked on vanilla javascript projects and found it a bit difficult to keep up with the different parts, all ending with messy code that is hard to maintain and scale, but the way you wire everything makes more sense.
and It would be much appreciated if you could describe in-depth why you take these different decisions.

Thank you and looking forward to seeing more of your future videos (Hopefully on bigger real-life projects) :)

[js-javascript]

more project based tutorials like this one please.

[AndrewOBannon]

I like your tutorials coz they are in pure JS.

[buennoo]

video is cool, but it's definitely not a tutorial for beginners. it requires base (but like VERY solid base) knowledge of js and how does html acts around js and vice-versus. i have coded in cpp but understand very little from this vid. it may be helpful only for people who are actually pretty confident with their js skills

[mrinalpramanick]

For quick add .. in my system "[inpTitle, inpBody].forEach(inputField => { " was throwing an Error of undefined "inputField" Dont know why .... If this shows to anybody .. just above this line declare the inputField as an variable ... Anybody having any suggestions ... Appreciations from my side

[dcode-software]

👩‍💻 Check out my JavaScript playlist:

💜 Join my Discord Server:

📣 Subscribe to dcode for more videos like this 🔥 🔽

[JamesKenedyooo]

I had a problem were I got an error saying notesListItem was not defined. Any idea on how to fix this.

[alexandre]

Fantastic tutorial to learn about structuring the code !! I am re-organising my code to follow this practice

[RianYK]

thank you for tutorial. This is the basic for introduction doing CRUD with JavaScript

[brianhayes]

Great tutorial! Just found your channel and am loving your videos.
I also love your VS Code theme! What’s the name?

[alicanarcasoy]

When I first try to console.log the getAllNotes method, I get a CORS error in the chrome console. What does this mean / why does this happen / what's the best way to fix it?

[riigel]

vanilla JS tutorials are the ones that i really love ❤️

[okon]

nice tutorial,
but please you're too fast, is heard to comprehend what you're saying or doing.
using the youtube playback speed isn't perfect.

[thecoderabbi]

You are amazing man! Thank you so much for putting in so much time. I also loved the fact that there were no frameworks, everything about this video satisfied me!!! Thank you so much again

[taofeeqomotolani]

I was forced to revise a lot of things following along with this project. I also love the fact that DOM kinda used the MVC architecture. May God increase you in knowledge

[SNKin-cr]

Thank you for your teaching, Could you tell me how can I run this app on my local PC. I mean that is only running on the URL: 127.0.0.1:5500. I want to run this App at URL: c:/.

[JohnCracau]

it's like the donnie darko of coding tutorials, you have to watch it twice because he constantly uses localstorage objects that are not present in your code / localstorage and you sometimes just have to believe he's telling you the truth.
in a way that's amazing, i have to learn a lot outside of this tutorial and actually catch up on my own, but i don't think that was the intention.
to be frank im thankful for this vid, i just wanted to poke this out

[miyagijunior]

Great video! How about a follow up video that shows how the text area can be formatted as rich text? i.e. add links, bold, italics etc. to the note body

[MrMartinvince]

one simple question, how do you write the divs in the html with just putting .notes#app...is it an addon???