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!

[@pain7359]

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

[@Assassin52]

For avoiding localstorage problem you have to call showNotes function at the end of js code....

[@polimorphic13]

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

[@GreatStackDev]

Fantastic!

[@TaiwoRasidi-v5v]

With this your video, i believe that very soon i will be proud of this journey

[@batuhanbayr7613]

best teacher for juniors 💙

[@HunterLeRay]

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

[@GreatStackDev]

Glad to hear that. Keep coding.😊

[@ashwinkumar5726]

Inside input box we can delete all data including delete img @@GreatStackDev

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

[@olawale11954]

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

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

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

[@flaviamelo5413]

Thank you so much!

[@Efizzy_brendan]

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

[@vigneshnaik546]

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

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

[@Dev_Ribeiro]

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

[@Islamic_content92]

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

[@himanshushekatkar1410]

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

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

[@bookreadershub1153]

better understanding of DOM manipulation

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

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

[@francesco.paletta]

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

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

[@alimulla4098]

Bring more projects for beginners sir😊

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

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

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

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

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

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

[@Themescore]

Make a video on permanent dark and light mode Website

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

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

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

[@ShimmerBodyCream]

thank you! What a fantastic resource.

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

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

[@zaidmalik1981]

Sir I also used font-family Poppins but not seen in the results

[@the_phoenix2768]

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

[@Practice_dsa_together]

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

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

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

[@MyGamingEra]

Local storage note working sir🥲

[@ltzZara]

Same 😩😣😑

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

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

[@abdoulayebah2932]

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

[@GRDipankar-kv6pu]

Awesome

[@GreatStackDev]

Thank You! 😊

[@rahulshendre7089]

done, thanks a lot

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

[@emmanuelimwa2905]

would you please provide the link for downloading images.

[@jayprakashyadab]

how to add the functioloty drag and drop of notes ?

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

[@incognito_user12]

Your 20sec unstoppable ad traumatizing me 🥲

[@anishhazra2204]

sir react js ka bhi bano video please

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

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

[@kaleb823]

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

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

[@AN-oq6fn]

In input box cursor is not coming please help

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

[@TamirPhillips]

I don't see the images link in the description

[@ToluwalopeAmojo]

I can't find the link either.

[@electroboyy2164]

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

[@AN-oq6fn]

Same did u resolve this

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

[@dadi_vlogs3254]

Thanks Bro.

[@amiralisalari6863]

Thanks❤

[@TechWithVaibhavbelekar]

google drive not work properly. Image download problem.

[@syedsalmanali7359]

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

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

[@amalilmu3235]

it's not working at my pc.

[@vedantzanjad]

Thank You

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

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

Nice

[@mdabu3331]

Nicee sir❤❤

[@purplestar-t7n]

what if the images are not showing

[@luckydotpro5533]

Show as about a video play using js

[@shifteditz06]

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

[@Apoorva_dhotre]

Click button is not working sir

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

[@LiflaMary]

if i reload the page datas are deleted.what is the reason?

[@Nishav7Editz]

U need to call shownotes( ) function at the end of the code

[@Dibyendu-dev]

nice

[@RonalRomeroVergel]

i refresh and disappear :'v

[@namangyan7647]

this application does not work on android?

[@boluwatifedavid-q2g]

mine isn't working when i click on it

[@itspankajfun8857]

not working this java code ples

[@ManasRanjanSahu]

Localstorage not working

[@srinithi9510]

in notes app how to give a link for map

[@SiwaBayek]

pics folder is no available

[@hiharajpoot314]

mera create note open hi nhi ho rha why??

[@coding-ka-badshah]

Make a full animated tekit booking website

[@coding-ka-badshah]

Make a full business marketing website

[@CodeWithRingo]

mine aint work

[@web_seriesatoz]

Can you help me sir

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

[@shubhamrathod9249]

17:08

[@yangus2485]

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

[@amrfathi5135]

Can i make it Exe

[@technicalg6808]

11:20

[@esy2bear970]

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

[@anubratamallick5502]

10:14

[@web_seriesatoz]

Hell sir

[@surafelfikadu4331]

... 💚💛❤🙏