Build A Notes App in HTML CSS & JavaScript | Notes App in JavaScript
HTML-код
- Опубликовано: 14 июн 2024
- Build A Notes App in HTML CSS & JavaScript | Notes App in JavaScript
In this video, I have shown you how to Build A Notes App in HTML CSS & JavaScript. In this note app, users can easily add, edit, or delete their notes. The notes user has added to this app will be stored in the browser's local storage so, they won't remove on page refresh or tab close.
Create A Todo List App in JavaScript
Watch: • Create A Todo List App...
Live Demo or Download Code of this Notes App
codingnepalweb.com/demos/note...
Timestamps:
0:00 Demo of Notes App
3:54 HTML Code Start
5:25 CSS Code Start
14:33 Popup Form HTML Code
15:39 Popup Form CSS Code
23:03 JavaScript Code Start
23:55 Showing or Hiding Popup Form
25:39 Saving Notes to Local Storage
33:50 Showing All Notes from Local Storage
38:36 Showing Settings Menu of Particular Note
41:29 Deleting Selected Note from the List & Local Storage
43:57 Updating Selected Note of the List
Second Channel - bit.ly/3aHNkru
Facebook - / coding.np
Instagram - / coding.np
Music Credit:
Deep Sea by Vendredi
Free Download / Stream: bit.ly/-deep-sea
Music promoted by Audio Library • Deep Sea - Vendredi (N...
Something 'bout July (Instrumental) by RYYZN
Free Download / Stream: bit.ly/-_something-bout-july
Music promoted by Audio Library • Something 'bout July (...
Ehrling - You And Me (Vlog No Copyright Music)
• Ehrling - You And Me (...
Jimmy Hardwind - Want Me (feat. Mike Archangelo)
• Jimmy Hardwind - Want ...
Don't forget to check out the live demo of this Notes App. Link is in the description!
Please create a project series only html css for beginners please brother
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
@@vebpath Did you get any bug fixes?
I learnt JavaScript recently and now ur videos are helping me a lot...
That's awesome!
@@CodingNepal hey will it work even we refresh or not
This is the best note app/tutorial we can ever had 😍
I have completed this project and I am grateful for this tutorial and I got to learn from this thnx for the video
Thank you for this tutorial ! It helped me a lot :)
Excellent tutorial, Thank you!
Happy to hear that!
Большое спасибо. Узнал очень много нового. Niceee
Great work Sir 🔥
Thanks ✌️
I just love this one
Best video of JavaScript i have seen ever
Happy to hear that
Thanks!!
Thank you bro. Bravoo
You're welcome bro
I think u should use htmlentities bcs if u put it enject into the page keep it up ✊✊
Love your work ❤️, sorry can you create like a blog site using this type of logic please
I'm a huge fan of your UI designs. Could I inquire as to where you learned ui/ux design?
Glad to hear that. I use dribbble or other similar sites to take inspiration and ideas for design.
best your video
Awesome👍
Thanks 👍
Just awesome ❤️ 🔥 🇳🇵
Thank you
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
bro's the smartest man alive, won't share github repo coz of watchtime
Awesome. Keep on working..
Thank you, I will
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.
Ok brother I'll it next time
❤❤
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.
Great content. I'll suggest you make voice overs. It makes it wayyyy easier to understand
Agreed
nice video men , thanks
Thanks for watching!
great
Nice tutorial 👍🏻
Glad you liked it!
@@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 😀
@@CodingNepal Love From India 🇮🇳❤️🇳🇵
Nice video sirr
Thank you.. Keep watching!
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.
Good Work Keep It Up Bro....
Thank you bro, I will try my best.
@@CodingNepal Thank You So Much For This Idea 💡 I Makes in 1:30 Hours
Please add text formatting feature in Notes App. e.g Bold, italic, underline , number list, bullet list etc.
So nice
Thanks
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.
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
Ok this is cool.
I recreated this app with next js and firebase 🤗
Great.. Keep going!
You are my idol
Happy to hear that :)
😍😍😍
Please tell how to change the size of the title box and description box independently
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
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
ayo does any one know how I can center my + button more perfectly in the dotted border? great tutorial btw
nice
Thanks
Can it store in cloud?
Otherwiser, anyone can't see notes from other device.....
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?
Wooaaao who you learned all that you know about Javascript, what is your secret?
What time you have working with Javascript?
It has been more than a year and still learning it. I learned by watching RUclips videos, blogs, etc.
You have to make a awesome design with datatable because their was i feel very to design.
Bro, This is cool! How can i add picture for the note? Please help me. 🙏🏻😃
Add img tag in note body and add your image with img src="image_path"
@@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!
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
can you put the tutorial for notes app in django
Tell soft soft I love what they did with the $15 doallors one %
Niceee
Thanks
Amazing video. But where are the notes being saved?
Notes are save in the browser local storage so, they won't remove on page refresh or tab close.
@@CodingNepal ohh thank you
Also is it possible for there to be a modal button that shows the note description when opened?
how to input img, videos , voice in note
I already got the source code thanks
I want the source code please send
You can download source code from here - www.codingnepalweb.com/build-a-notes-app-in-html-css-javascript/
Hey bro i am from banglidesh ,,,how are You
hello for deleting notes you've use noteId from where you get it
Note id is an index of array item which are stored in the browser local storage.
@@CodingNepal yes sir it's get sorted actually I was making a silly mistake.
And thanks for replying sir ❤️❤️❤️
Hi there could you please send the code of the project files?
Source codes will be uploaded soon on my website - www.codingnepalweb.com
9.52
Is it responsive?
Please create a project series only html css for beginners brother
View this playlist for html & css only videos - ruclips.net/p/PLpwngcHZlPaeqqJhXPKScLJDQ-OI33slu
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!
You may have forgot to add z-index property in .popup-box and .popup-box .popup. Please, double check it.
40:00
link of github?
pika to fly, guy
Voice over garnu brother...lastay garo hunxa
Okay, I'll try it!
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
I didn't understand.. Could you explain more..?
@@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
Thank you so much for informing this bug. It's been fixed now. Let me know if there are any other issues.
@@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
Can i have the codes?
Source codes will be uploaded on my website soon - www.codingnepalweb.com
Source code?
Source codes will be uploaded on my website soon - www.codingnepalweb.com
@@CodingNepal Waiting .....
Source code has been uploaded. Download from here - www.codingnepalweb.com/build-a-notes-app-in-html-css-javascript/
@@CodingNepal thanks buddy :)
Please create movie website
I want source code please
You can download source code from here - www.codingnepalweb.com/build-a-notes-app-in-html-css-javascript/
@@CodingNepal ok
Your project code (html, css, js) will be copied😎😎😉😉👨💻👨💻👨💻