Add ability to edit and remove notes

index.html

@@ -30,15 +30,28 @@
     <div id="content">
       <h1>Jenot</h1>
 
-      <note-form id="new-note">
+      <note-form mode="add" id="new-note">
         <div class="note">
           <p class="content">
           </p>
           <div class="toolbar">
+            <button class="add">➕</button>
+            <button class="tasklist-mode">☑️</button>
+            <button class="note-mode">📑</button>
+            <button class="remove">🗑️</button>
+          </div>
+        </div>
+      </note-form>
+
+      <note-form mode="edit" id="edit-note" class="hidden">
+        <div class="note">
+          <p class="content">
+          </p>
+          <div class="toolbar">
+            <button class="save">💾</button>
             <button class="tasklist-mode">☑️</button>
             <button class="note-mode">📑</button>
             <button class="remove">🗑️</button>
-            <button class="add">➕</button>
           </div>
         </div>
       </note-form>

js/components.js

@@ -447,11 +447,13 @@ class NoteForm extends HTMLElement {
   }
 
   connectedCallback() {
+    this.mode = this.attributes.mode.value;
     this.content = this.querySelector(".content");
     this.tasklistModeButton = this.querySelector(".tasklist-mode");
     this.noteModeButton = this.querySelector(".note-mode");
     this.removeButton = this.querySelector(".remove");
     this.addButton = this.querySelector(".add");
+    this.saveButton = this.querySelector(".save");
 
     this.tasklistModeButton.addEventListener("click", (e) => {
       e.preventDefault();
@@ -469,19 +471,40 @@ class NoteForm extends HTMLElement {
 
     this.removeButton.addEventListener("click", (e) => {
       e.preventDefault();
+      if (this.mode === "edit") {
+        this.dispatchEvent(
+          new CustomEvent("deleteNote", {
+            bubbles: true,
+            detail: this.note,
+          }),
+        );
+      }
       this.#reset();
     });
 
-    this.addButton.addEventListener("click", (e) => {
+    if (this.mode === "add") {
-      e.preventDefault();
+      this.addButton.addEventListener("click", (e) => {
-      this.dispatchEvent(
+        e.preventDefault();
-        new CustomEvent("addNote", {
+        this.dispatchEvent(
-          bubbles: true,
+          new CustomEvent("addNote", {
-          detail: this.note,
+            bubbles: true,
-        }),
+            detail: this.note,
-      );
+          }),
-      this.#reset();
+        );
-    });
+        this.#reset();
+      });
+    } else {
+      this.saveButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        this.dispatchEvent(
+          new CustomEvent("updateNote", {
+            bubbles: true,
+            detail: this.note,
+          }),
+        );
+        this.#reset();
+      });
+    }
 
     this.addEventListener("contentChange", () => {
       this.note.content = this.content.firstChild.value;
@@ -491,6 +514,12 @@ class NoteForm extends HTMLElement {
     this.#setContent();
   }
 
+  load(note) {
+    this.note = note;
+    this.#updateUI();
+    this.#setContent();
+  }
+
   #reset() {
     this.note = {
       type: "note",

js/jenot.js

@@ -5,19 +5,34 @@ import "./components.js";
 const Notes = new NoteStore("jenot-app");
 
 const newNote = document.querySelector("#new-note");
+const editNote = document.querySelector("#edit-note");
 
 Notes.addEventListener("save", render.bind(this));
 
 render();
 
 newNote.addEventListener("addNote", (e) => {
+  console.log(e.detail);
   Notes.add(e.detail);
   Notes.saveStorage();
 });
 
+editNote.addEventListener("updateNote", (e) => {
+  newNote.classList.remove("hidden");
+  editNote.classList.add("hidden");
+  Notes.update(e.detail);
+  Notes.saveStorage();
+});
+
+editNote.addEventListener("deleteNote", (e) => {
+  newNote.classList.remove("hidden");
+  editNote.classList.add("hidden");
+  Notes.remove(e.detail);
+  Notes.saveStorage();
+});
+
 function render() {
   const notes = Notes.all();
-  console.log(notes)
   const notesContainer = document.querySelector("#notes");
   notesContainer.replaceChildren();
 
@@ -47,5 +62,11 @@ function render() {
     }
 
     notesContainer.appendChild(container);
+
+    container.addEventListener("click", (e) => {
+      newNote.classList.add("hidden");
+      editNote.classList.remove("hidden");
+      editNote.load(Notes.get(container.id));
+    });
   });
 }

js/store.js

@@ -30,7 +30,7 @@ export class NoteStore extends EventTarget {
   }
 
   all = () => this.notes;
-  get = () => this.notes.find((note) => note.id === id);
+  get = (id) => this.notes.find((note) => note.id === id);
   getEditedNoteId = () => this.editedNoteId;
 
   add(note) {

style.css

@@ -167,13 +167,13 @@ note-form .note {
 }
 
 div#content {
-  width: 270px;
+  /* width: 270px; */
   max-width: 1200px;
   margin: 10px auto 0 auto;
 }
 
 .note {
-  max-width: 240px;
+  /* min-width: 240px; */
   background: beige;
   box-shadow: 2px 2px 4px 0px rgb(0 0 0 / 0.8);
   padding: 4px 8px;