Issue: When multiple notes are created simultaneously, and the same text is entered in the first note and saved, the blank remaining notes are not removed upon page reload or refresh. How can I ensure that empty notes are deleted and only notes with content are saved in local storage? Feel free to test this code on your local machine.
const icon = document.getElementById('icon-plus');
const add = document.querySelector('#plus');
// const show = () => {
// icon.style.display = "inline";
//}
// const hide = () => {
// icon.style.display = "none";
//}
const hideBtn = () => {
add.style.display = "none";
}
const showBtn = () => {
add.style.display = "flex";
}
const updateLocalStorage = () => {
const textAreaData = document.querySelectorAll('textarea');
const notes = [];
console.log(textAreaData);
textAreaData.forEach((note) => {
return notes.push(note.value);
})
localStorage.setItem('notes', JSON.stringify(notes));
// textArea.disabled = true;
}
const addNewNote = (text = '') => {
const note = document.createElement('div');
note.classList.add('notes');
const htmlData = `
<div class="upper-icon">
<i class="fas fa-edit"></i>
<i class="fas fa-save"></i>
<i class="fas fa-trash"></i>
</div>
<div class="text-content">
<div class="main" TextMode="MultiLine"">
</div>
<textarea id = "text-box" placeholder="Write a note..." onmouseover="hideBtn()" onmouseout="showBtn()"></textarea>
</div>
`;
note.insertAdjacentHTML('afterbegin', htmlData);
document.body.appendChild(note);
//References //
const edit = note.querySelector('.fa-edit');
const del = note.querySelector('.fa-trash');
const mainDiv = note.querySelector('.main');
const textArea = note.querySelector('textarea');
const save = note.querySelector('.fa-save');
// Delete the note //
del.addEventListener('click', () => {
note.remove();
updateLocalStorage();
})
//toggle using edit button //
textArea.value = text;
textArea.innerHTML = text;
edit.addEventListener('click', () => {
textArea.disabled = false;
// textArea.classList.toggle('hidden');
})
save.addEventListener('click', () => {
textArea.disabled = true;
mainDiv.classList.toggle('hidden');
updateLocalStorage();
})
textArea.addEventListener('change', (event) => {
// const value = event.target.value;
textArea.innerHTML = event.target.value;;
// if (textArea.value.length > 0) {
// updateLocalStorage();
// }
updateLocalStorage();
})
if (textArea.value.length != 0) {
textArea.disabled = true;
}
}
// getting a data from local storage //
const notes = JSON.parse(localStorage.getItem('notes'));
if (notes) {
notes.forEach((note) => {
addNewNote(note);
})
}
add.addEventListener('click', () => {
addNewNote()
});*{
(CSS code here...)
}
body{
(CSS code here...)
}
header{
(CSS code here...)
}
header .nav{
(CSS code here...)
}
header .nav h2{
(CSS code here...)
}
.button{
(CSS code here...)
}
.button button{
(CSS code here...)
}
.button .icon i{
(CSS code here...)
}
.button button h3{
(CSS code here...)
}
.button button:active{
(CSS code here...)
}
.button button h3:hover{
(CSS code here...)
}
.button button:hover{
(CSS code here...)
}
.notes{
(CSS code here...)
}
.notes .upper-icon{
(CSS code here...)
}
.notes .upper-icon i{
(CSS code here...)
}
.notes .text-content{
(CSS code here...)
}
/* .notes .main{
(CSS code here...)
} */
.notes textarea{
(CSS code here...)
}
.notes .upper-icon i.fa-edit:hover{
(CSS code here...)
}
.notes .upper-icon i.fa-trash:hover{
(CSS code here...)
}
.notes .upper-icon i.fa-save:hover{
(CSS code here...)
}
.hidden{
(CSS code here...)
}
@media only screen and (max-width: 950px){
(CSS code here...)
}
@media only screen and (max-width: 500px){
(CSS code here...)
}
footer {
(CSS code here...)
}<!DOCTYPE html>
<html lang="en">
<head>
(HTML code here...)
</head>
<body>
(HTML code here...)
</body>
</html>