How To Build Notes App Using HTML CSS and JavaScript

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

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

it's not working at my pc.

Thanks Bro.

The indians have much higher iq than the sweeds.

For everyone accidentally "remove" their delete button and don't know how to make it appear again. First, use localStorage.clear() to clear all the data you stored including the note you couldn't delete. Then, in the createBtn.addEventListener(), add this: img.setAttribute("contenteditable", "false");. So that you won't delete your button when you edit your note. P/s: remember to erase the clear storage command after you did this

google drive not work properly. Image download problem.

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

mine aint work

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

Nice

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?

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

better understanding of DOM manipulation

nice

Thanks for great content! Is it possible to share with us also code itself from github or something?

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

best teacher for juniors 💙

In case after refreshing the page if you are not getting the text as same as
USE THIS

notesContainer.addEventListener("click", function (e) {
if (e.target.tagName === "IMG") {
e.target.parentElement.remove();
updateStorage();
} else if (e.target.tagName === "P") {
notes = document.querySelectorAll(".input-box");
notes.forEach((note) => {
updateStorage();
});
}
});

Thank You

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

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.

you can use this instead of create element
addNoteBtn.addEventListener("click", () => {
const newNoteHTML = '<p contenteditable="true" class="input"><img src="./data/trash-bin.png" width="40px" onmouseover="animateTrash(this)" onmouseleave="stopAnimateTrash(this)"></p>';
noteContainer.insertAdjacentHTML("beforeend", newNoteHTML);

// After adding the new note, update the 'notes' NodeList
notes = document.querySelectorAll(".input");
});

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

There is a problem with content editable as if user select all and delete the content in browser, delete button also gets deleted 😂😂

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?

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

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

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

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

Local storage note working sir🥲

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.

mine isn't working when i click on it

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

Hi there could you please provide the source code ? I'd like to compare as my local storage isn't working. Thank you.

thank you! What a fantastic resource.

Design the CSS layout
Add CSS styles to create a visually appealing layout for your notes app. Style the container, input fields, buttons, and any other elements as needed.

pics folder is no available

would you please provide the link for downloading images.

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

Show as about a video play using js

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

sir react js ka bhi bano video please

Bring more projects for beginners sir😊

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

Make a video on permanent dark and light mode Website

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