Build A Notes App in HTML CSS & JavaScript | Notes App in JavaScript

Build A Notes App in HTML CSS & JavaScript | Notes App in JavaScript

In this video, I have shown you how to Build A Notes App in HTML CSS & JavaScript. In this note app, users can easily add, edit, or delete their notes. The notes user has added to this app will be stored in the browser's local storage so, they won't remove on page refresh or tab close.

🗂️ Get Source Code of this Notes App

🌐 Visit CodingNepal for helpful coding projects

📷 Follow me on Instagram

Timestamps:
0:00 Demo of Notes App
3:54 HTML Code Start
5:25 CSS Code Start
14:33 Popup Form HTML Code
15:39 Popup Form CSS Code
23:03 JavaScript Code Start
23:55 Showing or Hiding Popup Form
25:39 Saving Notes to Local Storage
33:50 Showing All Notes from Local Storage
38:36 Showing Settings Menu of Particular Note
41:29 Deleting Selected Note from the List & Local Storage
43:57 Updating Selected Note of the List

Music Credit:

Something 'bout July (Instrumental) by RYYZN

Ehrling - You And Me (Vlog No Copyright Music)

Jimmy Hardwind - Want Me (feat. Mike Archangelo)

[CodingNepal]

Don't forget to check out the live demo of this Notes App. Link is in the description!

[Kiyotaka_Ayanokoji_kun]

I learnt JavaScript recently and now ur videos are helping me a lot...

[ankitdeb]

bro's the smartest man alive, won't share github repo coz of watchtime

[abhisaragarwal]

I have completed this project and I am grateful for this tutorial and I got to learn from this thnx for the video

[ashishpatel]

Best video of JavaScript i have seen ever

[maskman]

This is the best note app/tutorial we can ever had 😍

[The_OnlyWarrior]

I think u should use htmlentities bcs if u put <script></script> it enject into the page keep it up ✊✊

[professor]

Hello Brother... nice video. It would be great if you could do voice over and explain everything that you did and why?
It would clear a lot of our doubts.

[НатальяАлфёрова-ит]

Большое спасибо. Узнал очень много нового. Niceee

[lighthouse]

Love your work ❤️, sorry can you create like a blog site using this type of logic please

[excelmichael]

Great content. I'll suggest you make voice overs. It makes it wayyyy easier to understand

[loydcose]

I'm a huge fan of your UI designs. Could I inquire as to where you learned ui/ux design?

[LaylaMiki]

Thank you for this tutorial ! It helped me a lot :)

[codigobasicox]

Wooaaao who you learned all that you know about Javascript, what is your secret?
What time you have working with Javascript?

[douarmedouailislam]

why do you add this condition please ?
e.target.tagName != "I"
isnt the condition e.target != elem enough ?
thank you for this tutorial you're the best

[teofilgall]

Bro, This is cool! How can i add picture for the note? Please help me. 🙏🏻😃

[krishnabhandari]

I recreated this app with next js and firebase 🤗

[Rasel]

Hi, Your tutorial is so much great. Your content is so rich. I am learning many many new things from your tutorials. I am grateful to you.
Btw i have found an issue practicing this tutorial. From 37:03 you were showing the fix of removing duplicate notes. But it didn't work . I tried through the tutorial but this code doesn't remove duplicate notes. Can you check it out pls ? Thanks again.
Update : Oh yeah i understand now what you meant by removing duplicate.

[unknown_person]

Please add text formatting feature in Notes App. e.g Bold, italic, underline, number list, bullet list etc.