******* 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 🙏🙏👋👋
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
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
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
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
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?
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.
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?
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 😂😂
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"); });
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?
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
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 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
******* 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!
Thank you again! I've been the whole morning creating projects following your tutorials.
Fantastic!
What r u doing now I am curious 😮?
best teacher for juniors 💙
For avoiding localstorage problem you have to call showNotes function at the end of js code....
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
I like your Tutorials, you're make JavaScript easier.
With this your video, i believe that very soon i will be proud of this journey
Thank you sir for the video. Have learnt alot from your videos
Great for learning how to use local storage and other things, congratulations for the video
Thank you for this tutorial! You explained that very well.
@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.
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!
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 🙏🙏👋👋
Thanks for giving me a new ideas
You did not work on the edit button? Assuming there's error and needed corrections 🤷🏻♀️
Nice one boss
thank you! What a fantastic resource.
Js tutorial banaye I want to learn JavaScript 👏👏👏👏jese basic js project wese hi js tutorial banaye
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
I have set on a journey to get a web dev job without a degree ask me time to time if it's done yet i will keep you updated pls wish me luck 😅
Instead of create element in javascript we can use inseradjecent html this is easy way
Nice video
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❤
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
Bring more projects for beginners sir😊
better understanding of DOM manipulation
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
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
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?
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
Hello Brother becous of i learn all new thing easily🙂If you don't mind make a video school management system in php plz🥺
Awesome
Thank You! 😊
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
done, thanks a lot
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
Thanks❤
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
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.
can you help me Why the delete image is deleted by cursor.
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 .....
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
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;
how to deploy it as an application and responsive to operate from mobile device
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
Nicee sir❤❤
Thank You
Thanks Bro.
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?
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?
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 😂😂
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
Sir I also used font-family Poppins but not seen in the results
how to add the functioloty drag and drop of notes ?
sir react js ka bhi bano video please
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
Nice
17:08
Local storage note working sir🥲
Same 😩😣😑
I don't see the images link in the description
I can't find the link either.
if i use getelementsbyclassname insttead of queryselectorall with the else if e.target.tagname==p condition it doesnt work. Why so
Hi i have followed what you did with the dustbin icon but after l place java script it disappears .can you help
nice
In input box cursor is not coming please help
Where is the path to download the images for this project.
My not work please help me
Why i can't write something on input field
if i reload the page datas are deleted.what is the reason?
U need to call shownotes( ) function at the end of the 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");
});
11:20
google drive not work properly. Image download 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
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!
can someone help me iam facing problem in this code iam unable to write or click on notes
help
Same did u resolve this
write inputBox.ContentEditable = "true";
this application does not work on android?
would you please provide the link for downloading images.
Show as about a video play using js
Your 20sec unstoppable ad traumatizing me 🥲
there is held error in javascript 1st 5th line please tell me
it's not working at my pc.
10:14
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
what if the images are not showing
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 😔😔
why is my local storage not working ? I'm new to programming i don't know much :(
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
18:33 i have problem that after i delete one note , i cant add new note anymore
Click button is not working sir
😘
mine isn't working when i click on it
mera create note open hi nhi ho rha why??
in notes app how to give a link for map
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);
});
}
Hey, can anyone help me. My text is not getting saved😭
You did not define the edit button
Do it yourself just targeting the element and change the attributes of content editable that's it
mine aint work
Localstorage not working
Make a full animated tekit booking website
Make a full business marketing website
not working this java code ples
pics folder is no available
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