Add ability to add notes to store

index.html

@@ -38,33 +38,11 @@
             <button class="tasklist-mode">☑️</button>
             <button class="note-mode">📑</button>
             <button class="remove">🗑️</button>
+            <button class="add">➕</button>
           </div>
         </div>
       </note-form>
 
-      <div class="note">
-        <editable-area>example note</editable-area>
-      </div>
-
-      <div class="note">
-        <task-list>
-          <ul>
-            <li draggable="true">
-              <task-list-item checked>one</task-list-item>
-            </li>
-            <li draggable="true"><task-list-item>two</task-list-item></li>
-            <li draggable="true"><task-list-item>three</task-list-item></li>
-            <li draggable="true"><task-list-item>four</task-list-item></li>
-            <li draggable="true"><task-list-item>five</task-list-item></li>
-            <li draggable="true"><task-list-item>six</task-list-item></li>
-            <li draggable="true"><task-list-item>seven</task-list-item></li>
-            <li draggable="true"><task-list-item>eight</task-list-item></li>
-            <li draggable="true"><task-list-item>nine</task-list-item></li>
-            <li draggable="true"><task-list-item>ten</task-list-item></li>
-          </ul>
-        </task-list>
-      </div>
-
       <div id="notes"></div>
     </div>
 

js/components.js

@@ -451,6 +451,7 @@ class NoteForm extends HTMLElement {
     this.tasklistModeButton = this.querySelector(".tasklist-mode");
     this.noteModeButton = this.querySelector(".note-mode");
     this.removeButton = this.querySelector(".remove");
+    this.addButton = this.querySelector(".add");
 
     this.tasklistModeButton.addEventListener("click", (e) => {
       e.preventDefault();
@@ -471,6 +472,17 @@ class NoteForm extends HTMLElement {
       this.#reset();
     });
 
+    this.addButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("addNote", {
+          bubbles: true,
+          detail: this.note,
+        }),
+      );
+      this.#reset();
+    });
+
     this.addEventListener("contentChange", () => {
       this.note.content = this.content.firstChild.value;
     });

js/jenot.js

@@ -1,6 +1,6 @@
 import { renderText } from "./dom.js";
 import { NoteStore } from "./store.js";
-import "./components.js"
+import "./components.js";
 
 const Notes = new NoteStore("jenot-app");
 
@@ -8,27 +8,18 @@ const newNote = document.querySelector("#new-note");
 
 Notes.addEventListener("save", render.bind(this));
 
-Notes.reset();
+render();
 
-Notes.add({
+newNote.addEventListener("addNote", (e) => {
-  type: "note",
+  Notes.add(e.detail);
-  content: "This is a test note",
+  Notes.saveStorage();
 });
 
-Notes.add({
-  type: "tasklist",
-  content: [
-    { checked: false, content: "First item" },
-    { checked: true, content: "Second item" },
-    { checked: false, content: "Third item" },
-  ],
-});
-
-Notes.saveStorage();
-
 function render() {
   const notes = Notes.all();
+  console.log(notes)
   const notesContainer = document.querySelector("#notes");
+  notesContainer.replaceChildren();
 
   notes.forEach((note) => {
     const container = document.createElement("div");
@@ -55,6 +46,6 @@ function render() {
       container.appendChild(list);
     }
 
-    notesContainer.replaceChildren(container);
+    notesContainer.appendChild(container);
   });
 }