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

Поделиться
HTML-код
  • Опубликовано: 31 янв 2025

Комментарии • 128

  • @CodingNepal
    @CodingNepal  2 года назад +18

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

    • @omorfaruk6986
      @omorfaruk6986 2 года назад

      Please create a project series only html css for beginners please brother

    • @ishere_ranjan
      @ishere_ranjan Год назад

      There is huge bug into your code
      when i add javascript code to the description the edit button stop working
      may be that code runs inside

    • @vanshshrivastava2325
      @vanshshrivastava2325 Год назад

      ​@@ishere_ranjan Did you get any bug fixes?

  • @Kiyotaka_Ayanokoji_kun
    @Kiyotaka_Ayanokoji_kun 2 года назад +16

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

  • @abhisaragarwal9084
    @abhisaragarwal9084 Год назад

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

  • @ankitdeb1163
    @ankitdeb1163 Год назад +1

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

  • @ashishpatel6078
    @ashishpatel6078 2 года назад

    Best video of JavaScript i have seen ever

  • @maskman4821
    @maskman4821 2 года назад

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

  • @professor3259
    @professor3259 2 года назад +7

    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.

  • @The_OnlyWarrior
    @The_OnlyWarrior 2 года назад +1

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

  • @CreativeTutorialsWeb
    @CreativeTutorialsWeb 2 года назад +6

    Great work Sir 🔥

  • @excelmichael4407
    @excelmichael4407 Год назад +1

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

  • @loydcose2780
    @loydcose2780 2 года назад +7

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

    • @CodingNepal
      @CodingNepal  2 года назад +5

      Glad to hear that. I use dribbble or other similar sites to take inspiration and ideas for design.

  • @rubendariogarcialopez9110
    @rubendariogarcialopez9110 2 года назад +2

    Excellent tutorial, Thank you!

  • @nehanshpatil6699
    @nehanshpatil6699 2 года назад +3

    Awesome👍

  • @НатальяАлфёрова-и6т
    @НатальяАлфёрова-и6т 2 года назад +4

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

  • @waqasalam_007
    @waqasalam_007 2 месяца назад

    Best devrloper in the world

  • @lighthouse1608
    @lighthouse1608 2 года назад +1

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

  • @douarmedouailislam1840
    @douarmedouailislam1840 2 года назад +1

    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

  • @yubiroaster6285
    @yubiroaster6285 2 года назад +1

    Just awesome ❤️ 🔥 🇳🇵

  • @shuhratabdurahmonov7783
    @shuhratabdurahmonov7783 2 года назад +1

    Thank you bro. Bravoo

  • @teofilgall
    @teofilgall Год назад +1

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

    • @archisman7634
      @archisman7634 Год назад +1

      Add img tag in note body and add your image with img src="image_path"

    • @teofilgall
      @teofilgall Год назад

      @@archisman7634 Thank you, it's ok, but how i can built in the add new note possibility option? Can it be done? Please help to me. Big thx!

  • @dotWebdesigns
    @dotWebdesigns 2 года назад

    Awesome. Keep on working..

  • @LaylaMiki
    @LaylaMiki 2 года назад

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

  • @codigobasicox
    @codigobasicox 2 года назад +1

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

    • @CodingNepal
      @CodingNepal  2 года назад +1

      It has been more than a year and still learning it. I learned by watching RUclips videos, blogs, etc.

  • @Cosname1
    @Cosname1 Год назад +1

    I just love this one

  • @MalahimTech
    @MalahimTech 2 года назад +2

    Nice tutorial 👍🏻

    • @CodingNepal
      @CodingNepal  2 года назад

      Glad you liked it!

    • @audiosky
      @audiosky 2 года назад

      @@CodingNepal Hii bro I'm from India and I love nepal 😚 and Nepalese 😛 Please tell me where are you from in Nepal
      Edit :- I'm your subscriber from very beginning 😀

    • @audiosky
      @audiosky 2 года назад

      @@CodingNepal Love From India 🇮🇳❤️🇳🇵

  • @COFFY_GAMING
    @COFFY_GAMING 2 года назад +1

    Nice video sirr

  • @Rasel720
    @Rasel720 2 года назад

    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.

  • @hospicyo
    @hospicyo Год назад

    hey, could u help me?
    i'm on 44:20 and when i add "updateNote......" and put the single quotes, it doesn't work, even after i declare the function below.

  • @krishnabhandari007
    @krishnabhandari007 2 года назад

    I recreated this app with next js and firebase 🤗

  • @adeboluadetorera1002
    @adeboluadetorera1002 2 года назад +1

    Amazing video. But where are the notes being saved?

    • @CodingNepal
      @CodingNepal  2 года назад +2

      Notes are save in the browser local storage so, they won't remove on page refresh or tab close.

    • @adeboluadetorera1002
      @adeboluadetorera1002 2 года назад +1

      @@CodingNepal ohh thank you
      Also is it possible for there to be a modal button that shows the note description when opened?

  • @princerajput4997
    @princerajput4997 Год назад

    Thanks for the tutorial, I have been trying to add a copy function to this if notes are too big but somehow nothing is working for same. If you could please help me with same.

  • @unknown_person3130
    @unknown_person3130 2 года назад +1

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

  • @AliGUISSOU-b8f
    @AliGUISSOU-b8f 7 месяцев назад

    Thanks a lot

  • @vatikaladishwere7744
    @vatikaladishwere7744 2 года назад

    Good Work Keep It Up Bro....

    • @CodingNepal
      @CodingNepal  2 года назад +1

      Thank you bro, I will try my best.

    • @vatikaladishwere7744
      @vatikaladishwere7744 2 года назад

      @@CodingNepal Thank You So Much For This Idea 💡 I Makes in 1:30 Hours

  • @gamingnikka2647
    @gamingnikka2647 2 года назад

    best your video

  • @ishere_ranjan
    @ishere_ranjan Год назад

    There is huge bug into your code
    when i add javascript code to the description the edit button stop working
    may be that code runs inside

  • @BieAnimation
    @BieAnimation 2 года назад

    Thanks!!

  • @vedantraut38
    @vedantraut38 2 года назад

    Please tell how to change the size of the title box and description box independently

  • @pavithrang6709
    @pavithrang6709 Год назад

    can you put the tutorial for notes app in django

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 года назад

    nice video men , thanks

  • @suncherraringtone3894
    @suncherraringtone3894 2 года назад

    Hey bro i am from banglidesh ,,,how are You

  • @Naimurtrix
    @Naimurtrix Год назад

    Can it store in cloud?
    Otherwiser, anyone can't see notes from other device.....

  • @abdelrhman_sasalh3522
    @abdelrhman_sasalh3522 2 года назад

    Thank you very much sir for this wonderful series, but if you allow me I have a question.
    Why when I use "wrapper.innerHTML += li" instead of "wrapper.insertAdjacentHTML("beforeend",li);" Adding "Show" to "popup-box" stops

  • @MrRare2
    @MrRare2 2 года назад

    I already got the source code thanks

    • @ITGOPINATHN
      @ITGOPINATHN 2 года назад

      I want the source code please send

    • @CodingNepal
      @CodingNepal  2 года назад

      You can download source code from here - www.codingnepalweb.com/build-a-notes-app-in-html-css-javascript/

  • @omorfaruk6986
    @omorfaruk6986 2 года назад

    Please create a project series only html css for beginners brother

    • @CodingNepal
      @CodingNepal  2 года назад

      View this playlist for html & css only videos - ruclips.net/p/PLpwngcHZlPaeqqJhXPKScLJDQ-OI33slu

  • @youtube.example
    @youtube.example 2 года назад

    You are my idol

  • @yadav.mahendra2804
    @yadav.mahendra2804 2 года назад

    hello for deleting notes you've use noteId from where you get it

    • @CodingNepal
      @CodingNepal  2 года назад

      Note id is an index of array item which are stored in the browser local storage.

    • @yadav.mahendra2804
      @yadav.mahendra2804 2 года назад

      @@CodingNepal yes sir it's get sorted actually I was making a silly mistake.
      And thanks for replying sir ❤️❤️❤️

  • @Mikeyboomin
    @Mikeyboomin 2 года назад

    I have a problem, I followed along with everything and it all worked great but I have a bug where I can access the settings button on all previous notes except the most recent one so i have to hard reload everytime I want to clear the entire page because the cursor dosent show as a pointer and i cant select the settings menu to edit or delete. please help me

  • @shrutipanghal5331
    @shrutipanghal5331 2 года назад

    So nice

  • @seelearnanduseyt
    @seelearnanduseyt 2 года назад +2

    Hi there could you please send the code of the project files?

    • @CodingNepal
      @CodingNepal  2 года назад

      Source codes will be uploaded soon on my website - www.codingnepalweb.com

  • @MR.KHORNKHAI
    @MR.KHORNKHAI 11 месяцев назад

    how to input img, videos , voice in note

  • @avijitchoudhury3237
    @avijitchoudhury3237 Год назад

    Is it responsive?

  • @maalumusic
    @maalumusic 2 года назад +1

    nice

  • @me-wtf
    @me-wtf 2 года назад

    You have to make a awesome design with datatable because their was i feel very to design.

  • @ClubMedia
    @ClubMedia 6 месяцев назад

    هذا رائع حقاً

  • @abcfuture5779
    @abcfuture5779 2 года назад

    great

  • @hansenyudistira
    @hansenyudistira 2 года назад

    please help ~~, how to make this appear on another browser or computer? i try this only appear on browser i use to add the notes
    how to convert this to using cookies?

  • @ameersalama8303
    @ameersalama8303 Год назад

    Thank you so much for your AMAZING content, there is a bug there, I copied long text from Wikipedia after I paste it and save I can't edit it!
    any help would be greatly appreciated.
    // Uncaught SyntaxError: missing ) after argument list

  • @St_ress
    @St_ress 2 года назад +3

    If you type a lot of text "text" enter "text" enter "text" enter "text" enter , then editing does not work.
    {title: "ef",…}
    date: "April 5, 2022"
    description: "erwrwrwrwerwrwrrw wrwrwrwrwrww r wrwrwrw werewrewrrww werwrwrwwad
    awd
    awd
    adw
    da"
    title: "ef"
    It would be nice to see how to store the editable data of a table in localstorage that has a lot of editable cells. there is no such lesson, everything is in the form with adding rows

    • @CodingNepal
      @CodingNepal  2 года назад

      I didn't understand.. Could you explain more..?

    • @St_ress
      @St_ress 2 года назад

      ​@@CodingNepalIf you write text and press enter several times "text + enter, text + enter text + enter", then the data after saving cannot be edited. The editing window does not appear. ruclips.net/video/Zr7JlxizOZw/видео.html

    • @CodingNepal
      @CodingNepal  2 года назад

      Thank you so much for informing this bug. It's been fixed now. Let me know if there are any other issues.

    • @ameersalama8303
      @ameersalama8303 Год назад

      @@CodingNepal Thank you so much for your AMAZING content, there is a bug there, I copied long text from Wikipedia after I paste it and save I can't edit it!
      any help would be greatly appreciated.
      // Uncaught SyntaxError: missing ) after argument list

  • @Joshuadzn-s2f
    @Joshuadzn-s2f 2 года назад +2

    😍😍😍

  • @jerade312
    @jerade312 2 года назад

    ayo does any one know how I can center my + button more perfectly in the dotted border? great tutorial btw

  • @sheailun5418
    @sheailun5418 2 года назад

    Tell soft soft I love what they did with the $15 doallors one %

  • @gowdru__hudugi
    @gowdru__hudugi 10 дней назад

    Edit function isn't working ..
    Can somebody help me ?😶

  • @meandvfx545
    @meandvfx545 2 года назад

    Ok this is cool.

  • @ZeeshanMRaje
    @ZeeshanMRaje 2 года назад

    40:00

  • @captainnet8572
    @captainnet8572 2 года назад

    Niceee

  • @easylifebyamazon
    @easylifebyamazon 2 года назад

    Voice over garnu brother...lastay garo hunxa

  • @srishtiporwal9433
    @srishtiporwal9433 Год назад

    link of github?

  • @Swag-iwnl
    @Swag-iwnl 2 года назад

    hi, first of all that was an amazing tutorial, I loved it ! but when i did that, after updating note that ellipsis icon showing on my notes (add popup + edit popup). Do you know why ? I checked my codes after and after but couldnt solve it.Thanks again!

    • @CodingNepal
      @CodingNepal  2 года назад

      You may have forgot to add z-index property in .popup-box and .popup-box .popup. Please, double check it.

  • @audryirutingabo7385
    @audryirutingabo7385 2 года назад

    Can i have the codes?

    • @CodingNepal
      @CodingNepal  2 года назад

      Source codes will be uploaded on my website soon - www.codingnepalweb.com

  • @ismailemir54
    @ismailemir54 Год назад

    9.52

  • @TRIMIXCLASHER
    @TRIMIXCLASHER 2 года назад

    Source code?

    • @CodingNepal
      @CodingNepal  2 года назад

      Source codes will be uploaded on my website soon - www.codingnepalweb.com

    • @TRIMIXCLASHER
      @TRIMIXCLASHER 2 года назад

      @@CodingNepal Waiting .....

    • @CodingNepal
      @CodingNepal  2 года назад

      Source code has been uploaded. Download from here - www.codingnepalweb.com/build-a-notes-app-in-html-css-javascript/

    • @TRIMIXCLASHER
      @TRIMIXCLASHER 2 года назад

      @@CodingNepal thanks buddy :)

  • @RafaelSouza-bq6yy
    @RafaelSouza-bq6yy 2 года назад

    pika to fly, guy

  • @umairjon7389
    @umairjon7389 2 года назад

    Please create movie website

  • @ganeshkumarj.m.a.c9550
    @ganeshkumarj.m.a.c9550 2 года назад

    Your project code (html, css, js) will be copied😎😎😉😉👨‍💻👨‍💻👨‍💻

  • @ITGOPINATHN
    @ITGOPINATHN 2 года назад

    I want source code please

    • @CodingNepal
      @CodingNepal  2 года назад

      You can download source code from here - www.codingnepalweb.com/build-a-notes-app-in-html-css-javascript/

    • @ITGOPINATHN
      @ITGOPINATHN 2 года назад

      @@CodingNepal ok