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

Sdílet
Vložit
  • čas přidán 26. 08. 2024

Komentáře • 70

  • @abubalo
    @abubalo Před 2 lety +20

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

  • @takhminam6068
    @takhminam6068 Před 2 lety +1

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

  • @mumbaitiger
    @mumbaitiger Před 2 lety +4

    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.

  • @lulusaikou221
    @lulusaikou221 Před 2 lety +2

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

  • @dancehalllyrics1303
    @dancehalllyrics1303 Před 2 lety +8

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

  • @RianY2K
    @RianY2K Před 2 lety +5

    Love your tutorial, keep the good work 👍

  • @imchiragkumar
    @imchiragkumar Před 2 lety +1

    i love that thank you sir make courses like this

  • @TomasMisura
    @TomasMisura Před 2 lety +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
      @cloudpuncher4615 Před 2 lety

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

  • @bigcco
    @bigcco Před 2 lety +1

    It really helped me a lot. Thank you.

  • @isos6534
    @isos6534 Před 2 lety +3

    Can you make more vue.js projects?

  • @jjuliefrance
    @jjuliefrance Před rokem

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

  • @DawitTeklayYohannes
    @DawitTeklayYohannes Před 3 měsíci

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

  • @amymathews1883
    @amymathews1883 Před 2 lety

    thank you for the detailed tutorial it really helped!!

  • @rahatfaruk2218
    @rahatfaruk2218 Před 2 lety +1

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

  • @rawsmoke8148
    @rawsmoke8148 Před rokem

    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.

  • @Dreamerforever3
    @Dreamerforever3 Před rokem

    Thanks a lot . this helped me so much

  • @js-javascript1706
    @js-javascript1706 Před 2 lety

    loving the project videos mate!

  • @nathanstanfordsr
    @nathanstanfordsr Před 2 lety +1

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

  • @senrign
    @senrign Před 2 lety

    Thanks, this was helpful

  • @girishdevappa5562
    @girishdevappa5562 Před rokem

    Thanks!

  • @zygimantas2216
    @zygimantas2216 Před 2 lety +1

    Keep up the good work ;)

  • @amraldroubie3127
    @amraldroubie3127 Před rokem

    very nice thank you so much

  • @rangabharath4253
    @rangabharath4253 Před 2 lety

    Awesome as always 👍

  • @user-bc9tg6dl9t
    @user-bc9tg6dl9t Před 9 měsíci

    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?

  • @amircahyadi9219
    @amircahyadi9219 Před 2 lety

    Its awesome dude👍

  • @TarunKumar-ul4jw
    @TarunKumar-ul4jw Před rokem

    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

  • @JanJanotik
    @JanJanotik Před rokem

    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 ?

  • @49thparallelgaming
    @49thparallelgaming Před rokem +2

    The Double Click to delete a note doesn't work

  • @dr.briaro
    @dr.briaro Před 2 lety

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

  • @TheOneAndOnlyMaster-xm8lp

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

  • @MoacirNetoskt
    @MoacirNetoskt Před 2 lety

    amazingggggggggg

  • @bmehder
    @bmehder Před 2 lety

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

  • @mauriciohinojosa5354
    @mauriciohinojosa5354 Před rokem

    How would I deploy this? Do I host this?

  • @cloudpuncher4615
    @cloudpuncher4615 Před 2 lety +1

    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
      @dcode-software  Před 2 lety

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

    • @vaibhavdhole9117
      @vaibhavdhole9117 Před 2 lety

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

    • @cloudpuncher4615
      @cloudpuncher4615 Před 2 lety +1

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

  • @ItsAria
    @ItsAria Před rokem

    my key doesnt show.. is that an issue

  • @hammadahmad5383
    @hammadahmad5383 Před 2 lety +1

    First 🙂🙂🥰

  • @inhle9479
    @inhle9479 Před 2 lety +1

    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
      @vaibhavdhole9117 Před 2 lety +1

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

    • @vietmobile159
      @vietmobile159 Před 2 lety

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

    • @vietmobile159
      @vietmobile159 Před 2 lety

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

    • @chubbyBunny94
      @chubbyBunny94 Před rokem

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

  • @ishratkaur1605
    @ishratkaur1605 Před rokem

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

    • @itsme-hq9vg
      @itsme-hq9vg Před rokem +1

      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.

  • @JuneBeforeJuly
    @JuneBeforeJuly Před 2 lety

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

    • @chubbyBunny94
      @chubbyBunny94 Před rokem

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

  • @storypur
    @storypur Před 2 lety

    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
      @vaibhavdhole9117 Před 2 lety

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

    • @chubbyBunny94
      @chubbyBunny94 Před rokem

      lol #overkill mate.

    • @chubbyBunny94
      @chubbyBunny94 Před rokem

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

  • @bilalelemrani
    @bilalelemrani Před rokem +1

    note : delete note will not work in touch screens

  • @J3dstar
    @J3dstar Před rokem

    The .note part of the css doesn't work

  • @NZMPlays
    @NZMPlays Před 2 lety +5

    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
      @mdshihabuddin8673 Před 2 lety +3

      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
    @kishalayray7570 Před 2 lety

    Dom is stick to DOM

  • @Zolipants
    @Zolipants Před 2 lety

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

    • @thorbenmoe4195
      @thorbenmoe4195 Před 2 lety

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

    • @thorbenmoe4195
      @thorbenmoe4195 Před 2 lety +2

      try to run the script after the div, then works

    • @chubbyBunny94
      @chubbyBunny94 Před rokem

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

    • @ulyssescortes4835
      @ulyssescortes4835 Před rokem

      @@thorbenmoe4195 Thanks that solved my issue

    • @CodeEnthusiast78912
      @CodeEnthusiast78912 Před rokem

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

  • @nohatetv8291
    @nohatetv8291 Před 2 lety

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