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

[@abubalo]

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

[@dcode-software]

You're favourite? 👀 Wow thanks mate!

[@takhminam6068]

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

[@imchiragkumar]

i love that thank you sir make courses like this

[@lulusaikou221]

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

[@RianY2K]

Love your tutorial, keep the good work 👍

[@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.

[@cloudpuncher4615]

Nah mate, he was good from the start... His early tutes were about basic concepts e.g. Array.shift() ect. Lately he's been building projects BUT if you're not the type of person who needs their hand held through projects all the little snippets are gold, especially for beginners...

[@dancehalllyrics1303]

Keep the great tutorials coming! They're worth more than gold! By the way: Which font are you using in your text editor?

[@dcode-software]

Hey thanks, using Roboto Mono

[@jjuliefrance]

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

[@bigcco]

It really helped me a lot. Thank you.

[@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.

[@js-javascript1706]

loving the project videos mate!

[@dcode-software]

Cheers mate glad you like them

[@amymathews1883]

thank you for the detailed tutorial it really helped!!

[@rangabharath4253]

Awesome as always 👍

[@zygimantas2216]

Keep up the good work ;)

[@amircahyadi9219]

Its awesome dude👍

[@rahatfaruk2218]

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

[@ishratkaur1605]

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

[@senrign]

Thanks, this was helpful

[@Dreamerforever3]

Thanks a lot . this helped me so much

[@girishdevappa5562]

Thanks!

[@isos6534]

Can you make more vue.js projects?

[@amraldroubie3127]

very nice thank you so much

[@nathanstanfordsr]

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

[@nohatetv8291]

Love your tutorial, keep the good work bro👍👍👍

[@dcode-software]

Thanks, will do!

[@DawitTeklayYohannes]

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

[@MoacirNetoskt]

amazingggggggggg

[@rawsmoke8148]

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.

[@알카라즈-l1u]

thanks for the tutorial like this! question: I get this error"Uncaught TypeError: Cannot read properties of null (reading 'querySelector')" at line const addNoteButton = notesContainer.querySelector(".add-note"); 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?

[@inhle9479]

Hello sir ! I run unsuccessfully, it error "Uncaught SyntaxError: Unexpected token N in JSON at position 20 at JSON.parse () at getNotes (main.js:12) at main.js:4" you can teach me fix it. Thank you very much !

[@vaibhavdhole9117]

" Uncaught TypeError: getNotes(...).forEach is not a function " error showing at 25.25min please help

[@vietmobile159]

@@vaibhavdhole9117 same here but dont know how to fix:))

[@vietmobile159]

@@vaibhavdhole9117 Try to delete all textarea elements in your HTML file then try refresh the page, it work with me

[@chubbyBunny94]

@@vietmobile159 make sure your function is returning an Array. if getNotes(...) isn't returning something that you can iterate over ( like an array) it won't work. Make sure getNotes is also returning something altogether. My get notes looked like this: getNotes() { if (localStorage.localStickyNotes === undefined) { console.log('failed to get sticky notes') localStorage.setItem('localStickyNotes', JSON.stringify([{}])); return JSON.parse(localStorage.getItem('localStickyNotes')); } else { console.log('sticky notes retrieved successfully'); return JSON.parse(localStorage.getItem('localStickyNotes')); } } Make sure to use the return keyword and maybe console.log what it's returned to see if it's an array. I didn't follow the tutorial exactly but my code returns an array of objects and arrays are iterable.

[@TheOneAndOnlyMaster-xm8lp]

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

[@bmehder]

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

[@dcode-software]

🤣🤣

[@hammadahmad5383]

First 🙂🙂🥰

[@TarunKumar-ul4jw]

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

[@dr.briaro]

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

[@storypur]

Is Lenovo legion 5 pro good for android and web development purposes? Processor and memory features - • 11th generation, core i7 • 16GB RAM, 1TB SSD • 6GB graphic/ NVIDIA GeForce RTX 3060 Or I should go for MacBook Air or Pro m1 With 16GB unified memory and 1TB SSD...?

[@vaibhavdhole9117]

" Uncaught TypeError: getNotes(...).forEach is not a function " error showing at 25.25min please help

[@chubbyBunny94]

lol #overkill mate.

[@chubbyBunny94]

@@vaibhavdhole9117 if getNotes(...) isn't returning something that you can iterate over ( like an array) it won't work. Make sure getNotes is also returning something altogether. My get notes looked like this: getNotes() { if (localStorage.localStickyNotes === undefined) { console.log('failed to get sticky notes') localStorage.setItem('localStickyNotes', JSON.stringify([{}])); return JSON.parse(localStorage.getItem('localStickyNotes')); } else { console.log('sticky notes retrieved successfully'); return JSON.parse(localStorage.getItem('localStickyNotes')); } } Make sure to use the return keyword and maybe console.log what it's returned to see if it's an array. I didn't follow the tutorial exactly but my code returns an array of objects and arrays are iterable.

[@JanJanotik]

How to modify the code so that all notes from all client devices were stored on the web server storage and will be able to work with same notes on all devices ?

[@JuneBeforeJuly]

could i and my gf use this and it would update with what we both put on it through separate devices?

[@chubbyBunny94]

no, localStorage doesn't work on separate devices. You'd need a database like firebase

[@cloudpuncher4615]

Your a machine mate.... your like an Aussie version of Steve Griffith. Are you in lock down? working from home? having a break?

[@dcode-software]

Cheers mate! Yeah still working from home basically in my office so day 🤣

[@vaibhavdhole9117]

" Uncaught TypeError: getNotes(...).forEach is not a function " error showing at 25.25min please help

[@cloudpuncher4615]

​@@vaibhavdhole9117 I think you might need to expand on that one mate. If you have a typo inside your inline function you'll get X is not a function. Just put up the the entire forEach(x => { x.doSomething }) code block.

[@mauriciohinojosa5354]

How would I deploy this? Do I host this?

[@ItsAria]

my key doesnt show.. is that an issue

[@bilalelemrani]

note : delete note will not work in touch screens

[@49thparallelgaming]

The Double Click to delete a note doesn't work

[@J3dstar]

The .note part of the css doesn't work

[@NZMPlays]

Cant follow these, you honestly move too fast for beginners. I dont know how you get your sentences to finish automatically but it would be a big help because you move way too fast and dont explain what youre doing much.

[@mdshihabuddin8673]

You can try to understand by source code that he provide in the video description. It's my trick to understand tutorial by source code but first i complete video then i follow the source code to understand.

[@kishalayray7570]

Dom is stick to DOM

[@Zolipants]

how the hell it s possible i copied pasted your code and it is not working for me??:DD

[@thorbenmoe4195]

const addNoteButton = notesContainer.querySelector(".add-note"); this command doesnt work for me

[@thorbenmoe4195]

try to run the script after the div, then works

[@chubbyBunny94]

@@thorbenmoe4195 have you used the same class names in your html?

[@ulyssescortes4835]

@@thorbenmoe4195 Thanks that solved my issue

[@CodeEnthusiast78912]

@@thorbenmoe4195 thank you i was going to lose my mind it was saying notesContainer is null