How To Build Notes App Using HTML CSS and JavaScript
Vložit
- čas přidán 5. 09. 2024
- 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...
******* 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!
Thank you sir for the video. Have learnt alot from your videos
@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.
Great for learning how to use local storage and other things, congratulations for the video
best teacher for juniors 💙
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
how to deploy it as an application and responsive to operate from mobile device
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
Js tutorial banaye I want to learn JavaScript 👏👏👏👏jese basic js project wese hi js tutorial banaye
Thank you for this tutorial! You explained that very well.
You did not work on the edit button? Assuming there's error and needed corrections 🤷🏻♀️
Nice one boss
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 🙏🙏👋👋
better understanding of DOM manipulation
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?
Instead of create element in javascript we can use inseradjecent html this is easy way
can someone help me iam facing problem in this code iam unable to write or click on notes
help
thank you! What a fantastic resource.
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🥺
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
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
Your 20sec unstoppable ad traumatizing me 🥲
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
Local storage note working sir🥲
Same 😩😣😑
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
done, thanks a lot
if i use getelementsbyclassname insttead of queryselectorall with the else if e.target.tagname==p condition it doesnt work. Why so
Awesome
Thank You! 😊
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
Bring more projects for beginners sir😊
sir react js ka bhi bano video please
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❤
Make a video on permanent dark and light mode Website
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
how to add the functioloty drag and drop of notes ?
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 .....
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 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 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.
Thanks❤
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?
Thank You
can you help me Why the delete image is deleted by cursor.
would you please provide the link for downloading images.
Thanks Bro.
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;
I don't see the images link in the description
I can't find the link either.
Show as about a video play using js
Where is the path to download the images for this project.
Nice
mine aint work
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
there is held error in javascript 1st 5th line please tell me
Hi i have followed what you did with the dustbin icon but after l place java script it disappears .can you help
it's not working at my pc.
google drive not work properly. Image download problem.
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!
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");
});
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?
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.
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
nice
Hey, can anyone help me. My text is not getting saved😭
why is my local storage not working ? I'm new to programming i don't know much :(
Click button is not working sir
Nicee sir❤❤
Make a full animated tekit booking website
Make a full business marketing website
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);
});
}
what if the images are not showing
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
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
this application does not work on android?
11:20
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
in notes app how to give a link for map
mine isn't working when i click on it
mera create note open hi nhi ho rha why??
Localstorage not working
pics folder is no available
i refresh and disappear :'v
not working this java code ples
Can you help me sir
17:08
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
You did not define the edit button
Do it yourself just targeting the element and change the attributes of content editable that's it
10:14
18:33 i have problem that after i delete one note , i cant add new note anymore
Can i make it Exe
Hell sir
does the notes remains if i close and re-open the live server?
hahaha, I can delete the trash can image with a simple "backspace"
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
Thank you ❤
thanks
THANK YOU!
worked! so simple