How To Build Notes App Using HTML CSS and JavaScript

Подписаться 1,1 млн

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

50% 1

Learn How To Build Notes App Using HTML CSS and JavaScript | Online Notes App In JavaScript Step By Step Tutorial For Beginners
#JavaScript #JavaScriptProjects
❤️ SUBSCRIBE: goo.gl/tTFmPb
In this video you will learn to make a Notes App or Website with HTML, CSS and JavaScript.
In this JavaScript Project we are using Local Storage that will store the notes in your web browser, So that if you close and restart the browser then also it will display your saved notes.
Download Images: drive.google.c...
JavaScript Notes app, Notes app using JavaScript, JavaScript projects for beginners, JavaScript projects for students, JavaScript tutorial, JavaScript project for college students, college project in javascript, Notes App Development
-----------------------------------------
Suggested Course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make fitness website design using HTML CSS:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make a Job Portal website design with HTML & CSS:
► • How To Make Website Us...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Connect with me:
👉 linktr.ee/iama...

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

10 сен 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@islamicfinance001 8 месяцев назад

******* Attention ******** Using the "let" keyword instead of "const" in declaring 'notes' is making a huge difference in the final outcome. SO, make sure to use the let keyword in declaring the notes variable!

@polimorphic13 Год назад

Thank you again! I've been the whole morning creating projects following your tutorials.

@GreatStackDev Год назад

Fantastic!

@ritiksharma185 9 месяцев назад

i don't where i code wrong but i write code like you but everything is working but the local storage save notes code not working can you help me please?

@viczav 4 месяца назад

Did you fix it? Everything works perfectly but that feature, lol

@aurelgolemi3626 3 месяца назад

I have a similar problem to which one note stays permanent without the delete button

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

check event listener of notes container wherr the 2nd else condition check whether e.target.tagName = "p"; or e.target.tagName="P";

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

@@aurelgolemi3626You deleted the delete button using backspace as it is inside P tag. The delete button should be outside of the P tag. You can check there is a cursor line if you mistakenly clicked there and press backspace then boom you delete your delete key. So better try to add that delete key outside of your oaragraph tag because we gave that paragraph tag to edit content using contenteditable=true. Try using your own idea to make that button stat outside of the p tag.

@ShubhamSharma-xn1tr 10 дней назад

@@KardanKaaal thanks a lot it resolved

@batuhanbayr7613 Год назад

best teacher for juniors 💙

@olawale11954 Год назад

Thank you sir for the video. Have learnt alot from your videos

@islamicfinance001 8 месяцев назад

@GreatStack, What is the necessity of the line 24 (i.e. notes = document.querySelectorAll(".input-box");) while the same thing is written in the line 3? Could you plz explain...

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

because let can be accessed in block scope separately, it cannot be globally accessed.

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

I see people getting error one important part is left in the code Check this you have to update Storage: createBtn.addEventListener("click", ()=>{ let inputBox = document.createElement("p"); let img = document.createElement("img"); inputBox.className = "input-box"; inputBox.setAttribute("contenteditable", "true"); img.src = "images/delete.png"; notesContainer.appendChild(inputBox).appendChild(img); updateStorage(); // Update storage when a new note is created })

@resh7521 3 месяца назад

Thank you so much, you saved me

@dubhub4373 12 дней назад

Yes but content inside the p is getting deleted after refreshing the page

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

how to deploy it as an application and responsive to operate from mobile device

@Dev_Ribeiro Год назад

Great for learning how to use local storage and other things, congratulations for the video

@electroboyy2164 2 месяца назад

can someone help me iam facing problem in this code iam unable to write or click on notes help

@DruvAbhi 29 дней назад

why if i write someting on note thn i click enter for next line after that i click delete option it delets only single line

@francesco.paletta 8 месяцев назад

Thank you for this tutorial! You explained that very well.

@ayushmanlimbu 7 месяцев назад

Quick Query. When we select the note the blinking line is not on the first line but its next to the delete icon. How to improve that?

@fahadullah1686 29 дней назад

Did you fix this error

@saadlasharii 25 дней назад

same thoughts!

@ShimmerBodyCream Год назад

thank you! What a fantastic resource.

@Efizzy_brendan Год назад

You did not work on the edit button? Assuming there's error and needed corrections 🤷🏻‍♀️ Nice one boss

@Hybridham86 Год назад

Hi there could you please provide the source code ? I'd like to compare as my local storage isn't working. Thank you.

@learncourses-hn2pb Год назад

Same issue

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

same issue, local storage not working

@akashmondal3952 2 месяца назад

Same issue

@vigneshnaik546 Год назад

Instead of create element in javascript we can use inseradjecent html this is easy way

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

Sir why my local storage data not updating? Its deleted when i refresh the page.

@uggman9 2 месяца назад

im getting the same error

@princeadigwe3764 26 дней назад

Here are my suggestions: 1. Make sure you call the showNotes() function. Maybe you only defined it and did not call it. In the video, he calls showNotes() function immediately after defining it 👉 23:36 2. Check your browser console to see if there are any error messages

@franciskp9117 9 месяцев назад

One minor bug i've noticed is that we can delete the delete button from the webpage. If done, there is no way to delete that particular note.

@zombiear6147 8 месяцев назад

Yes I got that too, you can add the below code in the place of input section and the functionality of the backspace will be disabled when selecting all text : createBtn.addEventListener("click", () => { let inputBox = document.createElement("p"); let img = document.createElement("img"); inputBox.className = "input-box"; inputBox.setAttribute("contenteditable", "true"); img.src = "images/delete.png"; img.addEventListener("mousedown", (event) => { event.stopPropagation(); }); inputBox.addEventListener("keydown", (event) => { if (event.key === "Backspace" && isCaretAtStart(inputBox)) { event.preventDefault(); } }); notesContainer.appendChild(inputBox).appendChild(img); }); function isCaretAtStart(element) { const selection = window.getSelection(); return selection.rangeCount > 0 && selection.getRangeAt(0).startOffset === 0; }

@franciskp9117 8 месяцев назад

@@zombiear6147 thanks bro

@DAGBEAVER1995 8 месяцев назад

@@zombiear6147 It seems to me, that making IMG element a sibling element with relative position fixed the problem. Also appending input-box element with IMG element, and deleting both at the same time

@Child_club 8 месяцев назад

Instead of writing the lengthy code simply write contenteditable = "false" in IMG tag 😅

@svdden_strike 4 месяца назад

@@Child_clubI didn’t work

@bilbyplaisir9413 Год назад

Hi I can say since I followed you my skills are now increasing I like your videos so much but I wanted you to make a video about a working payment gateway thank you 🙏🙏👋👋

@abdiladifmohamud5957 Год назад

Sir localstoarge is not working for me. How can I solve it? I have followed you step by step but am unsuccessful

@user-gp5bl7tl3x 11 месяцев назад

Capitalize the “p” in row 28 …do it like this 👇🏼 else if(e.target.tagName === “P”)

@sarthakgupta124 10 месяцев назад

You would've used const notes while declaring notes at the start of the js code instead of let. use let and it will work

@animemangagirl3420 Год назад

Amazing tutorial^^ that helped a lot. But... How can I do a like and dislike function that actually works on all comment's boxes??? @o@

@Nebelkehlchen Год назад

I am trying to think about it,. For my understanding: 1 Button for all notes together or 1 Button for each individual note?

@lexgim 4 месяца назад

if u use ctrl + a and delete u can delete the delete button lmaooo, how do i fix this?

@HakanLykiaDemir 3 месяца назад

notesContainer.addEventListener('click',function(e){ if(e.target.tagName === 'IMG'){ e.target.parentElement.remove(); updateStorage() }else{ notes = document.querySelectorAll('.input-box') notes.forEach(nt =>{ nt.onkeyup = function(){ updateStorage(); } }) } nt.querySelector('img').setAttribute('contenteditable', 'false'); //this line }) If you add this line of code, you can make 'img' uneditable. it will not disappear when you do a Delete operation afterwards.

@lexgim 3 месяца назад

@@HakanLykiaDemir i'll try this, either way I love you

@saadlasharii 25 дней назад

@@HakanLykiaDemir its not working for me even I exactly copied your code

@Islamic_content92 Год назад

Js tutorial banaye I want to learn JavaScript 👏👏👏👏jese basic js project wese hi js tutorial banaye

@MyGamingEra Год назад

Local storage note working sir🥲

@ltzZara 2 месяца назад

Same 😩😣😑

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

Your 20sec unstoppable ad traumatizing me 🥲

@anchalsehgal7779 2 месяца назад

if i use getelementsbyclassname insttead of queryselectorall with the else if e.target.tagname==p condition it doesnt work. Why so

@satisfyingvideos2.016 6 месяцев назад

hi dear when we select all and enter backspace key the delete image that we put at the bottom also removed.....why?

@faizanfactsyt2212 11 дней назад

because the image is also in the container and when you say remove the p tag in p tag there is also put the image aoutside of the container

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

Thanks for the wonderful tutorial ❤ But when i completed this project , in the first notes box delete icon is not showing and i can't be able to remove first note box 😢😢 What to do now ?!

@stackunderflow6167 7 месяцев назад

this also my problem. I realized from another comment that contenteditable = true makes the delete button also delete-able. So for now just copy the button from another notes 😂😂

@AVTerrorX Год назад

When i added updateStorage function in createBtn section, it started to store and save the data. Till before, it wasn't storing anyting. How is this possible?

@mohammadayasha9499 8 месяцев назад

beacuse we have to create element in local storage so that it can respond to any click events on notesContainer , i think .....

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

better understanding of DOM manipulation

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

done, thanks a lot

@alimulla4098 Год назад

Bring more projects for beginners sir😊

@mdakhlasurrahmanrana7433 Год назад

Hello Brother becous of i learn all new thing easily🙂If you don't mind make a video school management system in php plz🥺

@the_phoenix2768 Год назад

Hi i have followed what you did with the dustbin icon but after l place java script it disappears .can you help

@Priya_SM-vx1mu Год назад

Why I couldn't store the data when I refresh the page. I have given the exact get, set Item still i couldn't store and show the data.

@ed_badilla 10 месяцев назад

what can we use instead of document.execCommand("insertLineBreak"); as execCommand is deprecated ??? thanks for you hard work!

@quinojuan2 9 месяцев назад

Question to ChatGPT or Bard. Your life will change

@monk_widom Год назад

Sir I use button instead delete icon But when I write something it will start writing inside the buttons not I p tag ......solve this

@shagunsrivastava2753 3 месяца назад

same problem, did you find the solution to it?

@sweetdevil3647 Год назад

It's An Amazing Project Sir, I've Been Following You For The Few Days. And It Is Quite Good To Following You. Sir There Is Small Issue In This Nots Website That The Cursor Is Starting From The Image Tag Not From Te Starting, So How To Fix It ? And Also While Selecting All Text Using CTRL + A The All The Text With The Image Also Get Selected And While Pressing Back Space It's Also Deleting The Img

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

that's one big film title

@amiralisalari6863 2 месяца назад

Thanks❤

@vedantzanjad Год назад

Thank You

@dadi_vlogs3254 10 месяцев назад

Thanks Bro.

@GRDipankar-kv6pu 3 месяца назад

Awesome

@GreatStackDev 3 месяца назад

Thank You! 😊

@jayprakashyadab 3 месяца назад

how to add the functioloty drag and drop of notes ?

@amalilmu3235 9 месяцев назад

it's not working at my pc.

@kaleb823 Год назад

can you help me Why the delete image is deleted by cursor.

@Themescore Год назад

Make a video on permanent dark and light mode Website

@harshitvarshney3993 2 месяца назад

is there a method to contain the notes a person writes inside the notes container coz its going out of the container box after reaching the end ?

@princeadigwe3764 26 дней назад

Set this CSS property for the .input-box class, directly under the min-height property 👇 height: auto;

@pain7359 9 месяцев назад

why is my local storage not working ? I'm new to programming i don't know much :(

@CodeWithRingo 10 месяцев назад

mine aint work

@anishhazra2204 Год назад

sir react js ka bhi bano video please

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

Hey, can anyone help me. My text is not getting saved😭

@user-py4gb3hi9x Год назад

I don't see the images link in the description

@ToluwalopeAmojo Год назад

I can't find the link either.

@abdoulayebah2932 Год назад

Where is the path to download the images for this project.

@priyanshushekhar7548 8 месяцев назад

Why my local storage function not working. I tried so many times but my notes are not store in storage . Can you help me.

@pottaarunkumar4040 7 месяцев назад

Same for me also Can anyone please help me

@emmanuelimwa2905 Год назад

would you please provide the link for downloading images.

@charonissimo7683 2 месяца назад

Can somebody explain me, why the function preventDefault() is using? The Key "Enter worrks anyway! Also why preventing its function and writing the same function?

@saadlasharii 25 дней назад

same thoughts!

@user-yd4pb6tg4c 10 месяцев назад

google drive not work properly. Image download problem.

@syedsalmanali7359 Год назад

there is held error in javascript 1st 5th line please tell me

@Juwonempire Год назад

Hello Sir, everything works perfectly as it show in the tutorial, but after deleting the note, I'm unable to add new note until i remove the showNotes() function.

@ShivKumar-1717 Год назад

same problem

@PSECO_Apoorva 2 месяца назад

Click button is not working sir

@purbayanghosh9950 8 месяцев назад

Using contenteditable, true makes the delete image deletable. Problem is there in the code

@stackunderflow6167 7 месяцев назад

ah, you are right 😂 I'm wondering for minutes why my delete button is not showing. For now, I simply copy the delete button from another notes 😅😅 but how to actually solve it?

@namangyan7647 8 месяцев назад

this application does not work on android?

@user-rt7ql9di7l 10 месяцев назад

I have a problem of addEventListener at 5th line of js. It says Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') I've googled it but couldn't find any solutions. Can anyone help me with this

@quinojuan2 9 месяцев назад

share your code please

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

Super. But writing showNotes javascipt code, I got null in browser. I don't know why . And also after refreshing, its not showing the stored data. Can any one help me to resolve?

@AnkitVerma-dj9dn 7 месяцев назад

The notes variable is initially assigned a NodeList of elements with the class "input-box". However, when you dynamically add a new note in the event listener for the create button, you need to update the notes variable to include the new note.

@ManasRanjanSahu 3 месяца назад

Localstorage not working

@RonalRomeroVergel 2 месяца назад

i refresh and disappear :'v

@user-bk6yu8um3u 10 месяцев назад

Nice

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

when i want to save contant without deleting everything it didn't save anything so i used this code and it works fine with me if anyone face the same problem. else if (e.target.tagName === "P") { notes = document.querySelectorAll(".input-box"); notes.forEach(nt => { nt.addEventListener("keyup", updateStorage); }); }

@technicalg6808 6 дней назад

11:20

@mdabu3331 Год назад

Nicee sir❤❤

@user-cf2xk2de5t 8 месяцев назад

what if the images are not showing

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

nice

@arjuno7058 Год назад

I followed all the instructions in the video everything works fine, but when I reload the browser the note disappear. And when I checked on the console it shows no errors. The storage doesn't work

@abhishekpandey9762 Год назад

SAME PROBLEM bro

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

the p in else if(e.target.tagName === 'p') must be capitalized

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

@@abhishekpandey9762 the p in else if(e.target.tagName === 'p') must be capitalized

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

@@bigneism WOW...thanks a lot. It works 😃

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

@@arjuno7058 happy i could help

@hiharajpoot314 5 месяцев назад

mera create note open hi nhi ho rha why??

@luckydotpro5533 Год назад

Show as about a video play using js

@rakeshpandey6768 Год назад

There is a problem with content editable as if user select all and delete the content in browser, delete button also gets deleted 😂😂

@salehabdullah-lt7fk Год назад

I noticed the same thing, do you know the solution to prevent this?

@17-4-4 11 месяцев назад

did u find it?@@salehabdullah-lt7fk

@itspankajfun8857 5 месяцев назад

not working this java code ples

@srinithi9510 7 месяцев назад

in notes app how to give a link for map

@user-kq5zf2df3u Год назад

mine isn't working when i click on it

@bimokayoba Год назад

you can use this instead of create element addNoteBtn.addEventListener("click", () => { const newNoteHTML = ''; noteContainer.insertAdjacentHTML("beforeend", newNoteHTML); // After adding the new note, update the 'notes' NodeList notes = document.querySelectorAll(".input"); });

@coding-ka-badshah Год назад

Make a full animated tekit booking website

@coding-ka-badshah Год назад

Make a full business marketing website

@shubhamrathod9249 3 месяца назад

17:08

@abhisaragarwal9084 Год назад

Hello sir I want to know how can I make a project section for my portfolio website I need a good card design where it would be responsive and the UI should also not be that bad

@web_seriesatoz Год назад

Can you help me sir

@utkarshpatidar167 9 месяцев назад

if(localstorage issue){ You need to replace that else if condition You can write - else if (e.target.classList.contains("input-box")) }

@wafs1393 9 месяцев назад

Can you send me your source code, mine still doesnt work

@utkarshpatidar167 9 месяцев назад

@@wafs1393 ok After few hour i will send it to you.

@wafs1393 9 месяцев назад

@@utkarshpatidar167 ok I managed to fix the issue

@pain7359 9 месяцев назад

hi im new to js and i am really confused can you show me your code on this ? i dont know where should i put this

@sourav5736 3 месяца назад

Thanks a lot broooo❤

@SiwaBayek Год назад

pics folder is no available

@yangus2485 7 месяцев назад

does the notes remains if i close and re-open the live server?

@anubratamallick5502 7 месяцев назад

10:14

@mitamodak495 7 месяцев назад

You did not define the edit button

@deepdas7674 5 месяцев назад

Do it yourself just targeting the element and change the attributes of content editable that's it

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

18:33 i have problem that after i delete one note , i cant add new note anymore

@amrfathi5135 Год назад

Can i make it Exe

@web_seriesatoz Год назад

Hell sir

@WR_81 2 месяца назад

hahaha, I can delete the trash can image with a simple "backspace"

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

if the local storage doesn't work for you, and the notes aren't there after you reload the page, capitalize the p in row 28 else if(e.target.tagName === 'p') just change p to P and it's gonna work

@user-gp5bl7tl3x 11 месяцев назад

Thank you ❤

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

thanks