How to Build a Sticky Notes App using JavaScript (Beginner's Project)

View the SOURCE CODE here:

In today's video I'll be taking you through how to build a sticky notes app using HTML, CSS and JavaScript. This project is perfect for beginner/intermediate developers learning JavaScript.

It covers many areas including CSS Grid, Event Listeners, Creating HTML Elements Dynamically and adding to the DOM, and Local Storage.

Chapters:
0:00 Quick Overview
3:22 Writing the HTML
04:35 Writing the CSS
10:32 Writing the JavaScript
33:25 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

[abubalo]

Dom tutorial is getting better day by day. My favourite YouTube tutor.

[takhminam]

Thank you for the comprehensive explanation about using local storage. You rocked it. No one could do it better than you did .

[lulusaikou]

Nice tutorial~ Simpler than "notes app" but easier to understand. Thank you Dom❤

[imchiragkumar]

i love that thank you sir make courses like this

[TomasMisura]

it was already said your tutorials are getting really significantly improved. it's still Dom but improved Dom :). I like how you're trying do things byt different way than the others and it's perfectly fine.

[RianYK]

Love your tutorial, keep the good work 👍

[jjuliefrance]

Such a pleasure to listen and follow... Many thanks from France :)

[dancehalllyrics]

Keep the great tutorials coming! They're worth more than gold!

By the way: Which font are you using in your text editor?

[mumbaitiger]

Awesome. Wish you could add code for different notes and add a bar so each note can gave a title e.g. to do list and then in the body we can have different tasks.

[rahatfaruk]

Well explained. It was really an awesome beginner friendly project :) Following You! DOM :)

[amymathews]

thank you for the detailed tutorial it really helped!!

[ishratkaur]

at 31:32, why is it necesaary to add [0] while filtering the notes.

[rawsmoke]

Hi dcode thank you for this. I would suggest next time to code following a user behaviour (I click + then the text area appears then I can change the content, then I can edit etc...) as it is going a bit in every directions.

[nathanstanfordsr]

Loving you videos. Do you know how to make a 508 complaint drag and drop?

[DawitTeklayYohannes]

Good job. But I have one question: How worked without calling function could you explain it please

[bmehder]

Thank you, Dom. BTW, Aussies have weird hobbies. 0:57

[알카라즈-lu]

thanks for the tutorial like this! question: I get this error"Uncaught TypeError: Cannot read properties of null (reading 'querySelector')" at line const addNoteButton = I am not able to add note / see note that I added so I think code has issue with addNoteButton but not sure.. can you comment?

[TheOneAndOnlyMaster-xmlp]

Hi just asking how can I make any video private just by coding on notepad++ or visual studio code

[dr.briaro]

is there a shorter way to make this? kis principle?

[TarunKumar-uljw]

some one help in his url bar local host is mention but for me it is showing files://
and i guess because of that i code is note running