******* 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!
@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...
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 🙏🙏👋👋
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 })
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?
@@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.
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
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; }
@@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
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?
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 ?!
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 😂😂
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
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?
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.
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"); });
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
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?
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); }); }
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.
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
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
![Megan Thee Stallion - Bigger In Texas [Official Video]](http://i.ytimg.com/vi/QxTkZTLWdo4/mqdefault.jpg)
******* 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!
With this your video, i believe that very soon i will be proud of this journey
Thank you again! I've been the whole morning creating projects following your tutorials.
Fantastic!
Going strong, watching one of these everyday. learning consistently as well!
Glad to hear that. Keep coding.😊
Inside input box we can delete all data including delete img @@GreatStackDev
best teacher for juniors 💙
@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...
because let can be accessed in block scope separately, it cannot be globally accessed.
Thank you sir for the video. Have learnt alot from your videos
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?
Did you fix this error
same thoughts!
Great for learning how to use local storage and other things, congratulations for the video
You did not work on the edit button? Assuming there's error and needed corrections 🤷🏻♀️
Nice one boss
Js tutorial banaye I want to learn JavaScript 👏👏👏👏jese basic js project wese hi js tutorial banaye
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 🙏🙏👋👋
Thank you for this tutorial! You explained that very well.
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
})
Thank you so much, you saved me
Yes but content inside the p is getting deleted after refreshing the page
better understanding of DOM manipulation
Instead of create element in javascript we can use inseradjecent html this is easy way
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?
Did you fix it? Everything works perfectly but that feature, lol
I have a similar problem to which one note stays permanent without the delete button
check event listener of notes container wherr the 2nd else condition check whether e.target.tagName = "p"; or e.target.tagName="P";
@@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.
@@KardanKaaal thanks a lot
it resolved
what can we use instead of document.execCommand("insertLineBreak"); as execCommand is deprecated ???
thanks for you hard work!
Question to ChatGPT or Bard. Your life will change
how to deploy it as an application and responsive to operate from mobile device
Sir why my local storage data not updating? Its deleted when i refresh the page.
im getting the same error
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
thank you! What a fantastic resource.
Bring more projects for beginners sir😊
Sir localstoarge is not working for me. How can I solve it? I have followed you step by step but am unsuccessful
Capitalize the “p” in row 28 …do it like this 👇🏼
else if(e.target.tagName === “P”)
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
hi dear when we select all and enter backspace key the delete image that we put at the bottom also removed.....why?
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
Sir I also used font-family Poppins but not seen in the results
done, thanks a lot
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@
I am trying to think about it,. For my understanding: 1 Button for all notes together or 1 Button for each individual note?
Hi there could you please provide the source code ? I'd like to compare as my local storage isn't working. Thank you.
Same issue
same issue, local storage not working
Same issue
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.
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;
}
@@zombiear6147 thanks bro
@@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
Instead of writing the lengthy code simply write contenteditable = "false" in IMG tag 😅
@@Child_clubI didn’t work
Hello Brother becous of i learn all new thing easily🙂If you don't mind make a video school management system in php plz🥺
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?
beacuse we have to create element in local storage so that it can respond to any click events on notesContainer , i think .....
Awesome
Thank You! 😊
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
same problem, did you find the solution to it?
if(localstorage issue){
You need to replace that else if condition
You can write -
else if (e.target.classList.contains("input-box"))
}
Can you send me your source code, mine still doesnt work
@@wafs1393 ok
After few hour i will send it to you.
@@utkarshpatidar167 ok I managed to fix the issue
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
Thanks a lot broooo❤
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 ?!
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 😂😂
sir react js ka bhi bano video please
Thanks❤
Make a video on permanent dark and light mode Website
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 ?
Set this CSS property for the .input-box class, directly under the min-height property 👇
height: auto;
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
that's one big film title
Using contenteditable, true makes the delete image deletable. Problem is there in the code
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?
if u use ctrl + a and delete u can delete the delete button lmaooo, how do i fix this?
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.
@@HakanLykiaDemir i'll try this, either way I love you
@@HakanLykiaDemir its not working for me even I exactly copied your code
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");
});
Thank You
how to add the functioloty drag and drop of notes ?
Thanks Bro.
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
Where is the path to download the images for this project.
if i reload the page datas are deleted.what is the reason?
can you help me Why the delete image is deleted by cursor.
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
SAME PROBLEM bro
the p in
else if(e.target.tagName === 'p')
must be capitalized
@@abhishekpandey9762
the p in
else if(e.target.tagName === 'p')
must be capitalized
@@bigneism WOW...thanks a lot. It works 😃
@@arjuno7058 happy i could help
Your 20sec unstoppable ad traumatizing me 🥲
Hi i have followed what you did with the dustbin icon but after l place java script it disappears .can you help
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.
if i use getelementsbyclassname insttead of queryselectorall with the else if e.target.tagname==p condition it doesnt work. Why so
would you please provide the link for downloading images.
In input box cursor is not coming please help
Nice
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?
same thoughts!
Local storage note working sir🥲
Same 😩😣😑
Nicee sir❤❤
I don't see the images link in the description
I can't find the link either.
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);
});
}
Why my local storage function not working.
I tried so many times but my notes are not store in storage .
Can you help me.
Same for me also
Can anyone please help me
there is held error in javascript 1st 5th line please tell me
nice
this application does not work on android?
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.
same problem
google drive not work properly. Image download problem.
Show as about a video play using js
why is my local storage not working ? I'm new to programming i don't know much :(
can someone help me iam facing problem in this code iam unable to write or click on notes
help
Same did u resolve this
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 😔😔
There is a problem with content editable as if user select all and delete the content in browser, delete button also gets deleted 😂😂
I noticed the same thing, do you know the solution to prevent this?
did u find it?@@salehabdullah-lt7fk
it's not working at my pc.
what if the images are not showing
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
share your code please
17:08
Click button is not working sir
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
mera create note open hi nhi ho rha why??
in notes app how to give a link for map
Hey, can anyone help me. My text is not getting saved😭
mine isn't working when i click on it
Localstorage not working
pics folder is no available
mine aint work
11:20
not working this java code ples
Make a full animated tekit booking website
Make a full business marketing website
Can you help me sir
10:14
You did not define the edit button
Do it yourself just targeting the element and change the attributes of content editable that's it
i refresh and disappear :'v
does the notes remains if i close and re-open the live server?
Can i make it Exe
18:33 i have problem that after i delete one note , i cant add new note anymore
Hell sir
... 💚💛❤🙏
hahaha, I can delete the trash can image with a simple "backspace"