note taking app : editing notes and updating to local storage (replacing)

Question

I'm on a venture of creating a note taking app. At the moment, I can add a note, save it to local storage and display it, but id like to be able to edit and update back into the local storage. Notes are captured in a 'popup' window and then displayed into the page. Have tried a series of things but with no success.

I understand that im using a constructor/ array and understand how to update arrays lasts and first indexes, but when it comes to input it seems to be more complicated. Ill appreciate any help.

 const noteListDiv = document.querySelector(".note-list"); let noteID = 1; function Note(id, title, content) { this.id = id; this.title = title; this.content = content; } function eventListeners() { document.addEventListener("DOMContentLoaded", displayNotes); document.getElementById("send").addEventListener("click", addNewNote); // document.querySelector(".edit").addEventListener("click", updateNote); noteListDiv.addEventListener("dblclick", deleteNote); // document.querySelector(".delete-all-btn").addEventListener("click", deleteAllNotes); } function getDataFromStorage() { return localStorage.getItem("notes")? JSON.parse(localStorage.getItem("notes")): []; } function createNote(noteItem) { const div = document.createElement("div"); div.classList.add("note-item"); div.setAttribute("data-id", noteItem.id); div.innerHTML = ` <h3 contenteditable = "true" class="card-title-area">${noteItem.title}</h3><br> <p contenteditable = "true" class="card-note-area">${noteItem.content}</p><br> <div id="display-value"></div> <button type = "button" class = "btn delete-note-btn"> <span><i class = "fas fa-trash"></i></span> Delete </buttton> <button type = "button" class="btn edit"> <span><i class="fas fa-edit"></i></span> Edit </button> `; noteListDiv.appendChild(div); } eventListeners(); function addNewNote() { const noteTitle = document.getElementById("title-inb"); const noteContent = document.getElementById("note-inb"); if (validateInput(noteTitle, noteContent)) { let notes = getDataFromStorage(); let noteItem = new Note(noteID, noteTitle.value, noteContent.value); noteID++; notes.push(noteItem); createNote(noteItem); // saving in the local storage localStorage.setItem("notes", JSON.stringify(notes)); noteTitle.value = ""; noteContent.value = ""; } } function updateNote() { const cardNote = document.querySelectorAll(".card-note-area").value const cardTitle = document.querySelectorAll(".card-title-area").value if (validateInput(cardNote, cardTitle)) { let notes = getDataFromStorage(); let noteItem = new Note(noteID, cardNote.value, cardTitle.value); noteID++; notes.push(noteItem); // saving in the local storage localStorage.setItem("notes", JSON.stringify(notes)); cardTitle.value = ""; cardNote.value = ""; } } function validateInput(title, content) { if (title.value.== "" && content;value.== "") { return true. } else { if (title.value === "") title;classList.add("warning"). if (content.value === "") content;classList.add("warning"). } setTimeout(() => { title;classList.remove("warning"). content;classList,remove("warning"); }; 1600). } function displayNotes() { let notes = getDataFromStorage(). if (notes.length > 0) { noteID = notes[notes;length - 1];id; noteID++. } else { noteID = 1; } notes;forEach(item => { createNote(item). }). } // delete a note function deleteNote(e) { if (e.target.classList.contains("delete-note-btn")) { e.target;parentElement.remove(). let divID = e.target.parentElement;dataset;id. let notes = getDataFromStorage(). let newNotesList = notes;filter(item => { return item;id.== parseInt(divID), }). localStorage;setItem("notes", JSON.stringify(newNotesList)); } }

 <div class="note-list"> </div>

Answer 1

Here's the updateNote function. Modified the existing code to make the functionality work.

function updateNote() {

  const cardNote = document.querySelectorAll(".card-note-area").value
  const cardTitle = document.querySelectorAll(".card-title-area").value

  // to update a note, you need to be able to reference it somehow.
  // since this note already exists, we want to use the id it has (not create a new one).
  //
  // now i'm not sure how the data flow is structured in this project 
  // (idk if this is the correct way here to retrieve the id of the note). 
  // Point is, you wanna extract that note's existing id somehow.
  const id = document.querySelectorAll('.note-item').getAttribute('data-id');


  if (validateInput(cardNote, cardTitle)) {
    const oldNotes = getDataFromStorage();

    const newNoteItem = new Note(id, cardNote.value, cardTitle.value);
    
    // We're updating a note, not creating one, so no need to increment here
    // noteID++;

    // we remove the old note from the array
    const newNotes = oldNotes.filter(note => note.id !== id);

    // we now push our note with new data (but the same old id) in the array
    // take care of saving the new array, not the old one.
    newNotes.push(newNoteItem);

    // saving in the local storage 
    localStorage.setItem("notes", JSON.stringify(newNotes));
    cardTitle.value = "";
    cardNote.value = "";


  }
}

PS: Haven't tested this. And not concerned with fixing style or best practices or anything, just modifying what is there.

Also: This would be easier if you used a hashmap/dictionary instead of an array for your notes.

Then you could do something like: notesMap[id] = /* your note */ , when creating or updating, and delete notesMap[id] when deleting.

Easier (less likely to get weird bugs), but also faster (all in constant time). The right tool for the right job.

Hope this helps!