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

Подписаться 132 тыс.

Просмотров 47 тыс.

50% 1

View the SOURCE CODE here:
codepen.io/dcode-software/pen...
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
🏫 My Udemy Courses - www.udemy.com/user/domenic-co...
🎨 Download my VS Code theme - marketplace.visualstudio.com/...
💜 Join my Discord Server - / discord
🐦 Find me on Twitter - / dcodeyt
💸 Support me on Patreon - / dcode
📰 Follow me on DEV Community - dev.to/dcodeyt
📹 Join this channel to get access to perks - / @dcode-software
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

Опубликовано:

4 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@takhminam6068 Год назад

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

@abubalo 2 года назад

Dom tutorial is getting better day by day. My favourite RU-vid tutor.

@dcode-software 2 года назад

You're favourite? 👀 Wow thanks mate!

@lulusaikou221 2 года назад

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

@imchiragkumar 2 года назад

i love that thank you sir make courses like this

@RianY2K 2 года назад

Love your tutorial, keep the good work 👍

@jjuliefrance Год назад

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

@amymathews1883 2 года назад

thank you for the detailed tutorial it really helped!!

@dancehalllyrics1303 2 года назад

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 2 года назад

Hey thanks, using Roboto Mono

@rahatfaruk2218 2 года назад

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

@bigcco Год назад

It really helped me a lot. Thank you.

@mumbaitiger 2 года назад

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 2 года назад

loving the project videos mate!

@dcode-software 2 года назад

Cheers mate glad you like them

@TomasMisura 2 года назад

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 2 года назад

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

@rangabharath4253 2 года назад

Awesome as always 👍

@senrign 2 года назад

Thanks, this was helpful

@nathanstanfordsr 2 года назад

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

@zygimantas2216 2 года назад

Keep up the good work ;)

@amircahyadi9219 2 года назад

Its awesome dude👍

@Dreamerforever3 Год назад

Thanks a lot . this helped me so much

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

@girishdevappa5562 Год назад

Thanks!

@isos6534 2 года назад

Can you make more vue.js projects?

@amraldroubie3127 Год назад

very nice thank you so much

@TheOneAndOnlyMaster-xm8lp 2 года назад

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

@dr.briaro 2 года назад

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

@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

@DawitTeklayYohannes Месяц назад

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

@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 ?

@user-bc9tg6dl9t 7 месяцев назад

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?

@MoacirNetoskt Год назад

amazingggggggggg

@mauriciohinojosa5354 Год назад

How would I deploy this? Do I host this?

@hammadahmad5383 2 года назад

First 🙂🙂🥰

@storypur 2 года назад

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 2 года назад

" 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.

@bmehder 2 года назад

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

@dcode-software 2 года назад

🤣🤣

@ItsAria Год назад

my key doesnt show.. is that an issue

@JuneBeforeJuly 2 года назад

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

@inhle9479 2 года назад

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 2 года назад

" 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.

@49thparallelgaming Год назад

The Double Click to delete a note doesn't work

@ishratkaur1605 Год назад

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

@itsme-hq9vg Год назад

It's probably too late to reply, but someone might find it helpful. The filter() method creates an array, in this case we get an array that contains the object we're looking for eg. [{ id: 12, content: 'this is a note' }]. We want the note object itself and not the array, adding the [0] would return the object { id: 12, content: 'this is a note' } which is the note we're looking for.

@J3dstar Год назад

The .note part of the css doesn't work

@cloudpuncher4615 2 года назад

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 2 года назад

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

@vaibhavdhole9117 2 года назад

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

@cloudpuncher4615 2 года назад

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

@bilalelemrani 11 месяцев назад

note : delete note will not work in touch screens

@kishalayray7570 2 года назад

Dom is stick to DOM

@NZMPlays 2 года назад

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 2 года назад

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.