How To Build Notes App Using HTML CSS and JavaScript

[@islamicfinance001]

******* 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!

[@HunterLeRay]

Going strong, watching one of these everyday. learning consistently as well!

[@GreatStackDev]

Glad to hear that. Keep coding.😊

[@polimorphic13]

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

[@GreatStackDev]

Fantastic!

[@batuhanbayr7613]

best teacher for juniors 💙

[@olawale11954]

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

[@Dev_Ribeiro]

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

[@francesco.paletta]

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

[@islamicfinance001]

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

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

[@ShimmerBodyCream]

thank you! What a fantastic resource.

[@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 🙏🙏👋👋

[@Efizzy_brendan]

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

[@ritiksharma185]

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]

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

[@aurelgolemi3626]

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]

@@KardanKaaal thanks a lot it resolved

[@ayushmanlimbu]

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]

Did you fix this error

[@saadlasharii]

same thoughts!

[@himanshushekatkar1410]

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

[@shubhamkapase07]

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]

Thank you so much, you saved me

[@dubhub4373]

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

[@Islamic_content92]

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

[@Islamic_wisdom535]

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]

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

[@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]

that's one big film title

[@vigneshnaik546]

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

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

[@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]

same issue, local storage not working

[@akashmondal3952]

Same issue

[@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🥺

[@abdiladifmohamud5957]

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

[@UchechukwuBenedict-s7s]

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

[@sarthakgupta124]

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

[@rahulshendre7089]

done, thanks a lot

[@alimulla4098]

Bring more projects for beginners sir😊

[@electroboyy2164]

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

[@franciskp9117]

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]

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]

@@zombiear6147 thanks bro

[@DAGBEAVER1995]

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

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

[@svdden_strike]

@@Child_clubI didn’t work

[@realnatureloveradda1811]

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

[@uggman9]

im getting the same error

[@princeadigwe3764]

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

[@ed_badilla]

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

[@quinojuan2]

Question to ChatGPT or Bard. Your life will change

[@amiralisalari6863]

Thanks❤

[@bookreadershub1153]

better understanding of DOM manipulation

[@lexgim]

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

[@HakanLykiaDemir]

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]

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

[@saadlasharii]

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

[@GRDipankar-kv6pu]

Awesome

[@GreatStackDev]

Thank You! 😊

[@vedantzanjad]

Thank You

[@Themescore]

Make a video on permanent dark and light mode Website

[@muhammadanas5698]

My function showNotes does not work when i refresh the page all notes are delete from the page someone help me to fix the problem 😔😔

[@dadi_vlogs3254]

Thanks Bro.

[@DruvAbhi]

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

[@satisfyingvideos2.016]

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

[@faizanfactsyt2212]

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

[@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]

same problem, did you find the solution to it?

[@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]

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

[@MyGamingEra]

Local storage note working sir🥲

[@ltzZara]

Same 😩😣😑

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

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

[@CodeWithRingo]

mine aint work

[@jayprakashyadab]

how to add the functioloty drag and drop of notes ?

[@mdabu3331]

Nicee sir❤❤

[@Practice_dsa_together]

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

[@amalilmu3235]

it's not working at my pc.

[@kaleb823]

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

[@anishhazra2204]

sir react js ka bhi bano video please

[@PSECO_Apoorva]

Click button is not working sir

[@harshitvarshney3993]

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]

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

[@abdoulayebah2932]

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

[@purbayanghosh9950]

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

[@stackunderflow6167]

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?

[@emmanuelimwa2905]

would you please provide the link for downloading images.

[@TamirPhillips]

I don't see the images link in the description

[@ToluwalopeAmojo]

I can't find the link either.

[@chargeff06]

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

[@pain7359]

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

[@ಜ್ಞಾನಭಂಡಾರ-ಲ7ಟ]

Nice

[@RonalRomeroVergel]

i refresh and disappear :'v

[@namangyan7647]

this application does not work on android?

[@incognito_user12]

Your 20sec unstoppable ad traumatizing me 🥲

[@syedsalmanali7359]

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

[@TechWithVaibhavBelekar]

google drive not work properly. Image download problem.

[@charonissimo7683]

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]

same thoughts!

[@ManasRanjanSahu]

Localstorage not working

[@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); }); }

[@purplestar-t7n]

what if the images are not showing

[@Dibyendu_das_96]

nice

[@luckydotpro5533]

Show as about a video play using js

[@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]

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

[@bigneism]

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

[@arjuno7058]

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

[@bigneism]

@@arjuno7058 happy i could help

[@web_seriesatoz]

Can you help me sir

[@priyanshushekhar7548]

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]

Same for me also Can anyone please help me

[@boluwatifedavid-q2g]

mine isn't working when i click on it

[@hiharajpoot314]

mera create note open hi nhi ho rha why??

[@itspankajfun8857]

not working this java code ples

[@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]

did u find it?@@salehabdullah-lt7fk

[@SiwaBayek]

pics folder is no available

[@shubhamrathod9249]

17:08

[@Kim-d2u]

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]

share your code please

[@utkarshpatidar167]

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

[@wafs1393]

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

[@utkarshpatidar167]

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

[@wafs1393]

@@utkarshpatidar167 ok I managed to fix the issue

[@pain7359]

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]

Thanks a lot broooo❤

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

[@technicalg6808]

11:20

[@srinithi9510]

in notes app how to give a link for map

[@mitamodak495]

You did not define the edit button

[@deepdas7674]

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

[@coding-ka-badshah]

Make a full animated tekit booking website

[@coding-ka-badshah]

Make a full business marketing website

[@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"); });

[@yangus2485]

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

[@esy2bear970]

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

[@anubratamallick5502]

10:14

[@amrfathi5135]

Can i make it Exe

[@web_seriesatoz]

Hell sir

[@WR_81]

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

[@bigneism]

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

[@UchechukwuBenedict-s7s]

Thank you ❤

[@josephchiedozie7626]

thanks

[@daniaroundtheworld1357]

THANK YOU!

[@adjbamidele686]

worked! so simple

[@target500milliontradersinv5]

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]

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.