zoldar/jenot
1
0
Fork 0
mirror of https://github.com/zoldar/jenot.git synced 2026-01-05 07:02:55 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add ability to add notes to store

Browse source
This commit is contained in:
Adrian Gruntkowski 2024-11-15 12:28:35 +01:00
parent 9e41a54d65
commit 6c6a6d515a
3 changed files with 21 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
index.html
View file

@ -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>

12
js/components.js
View file

@ -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;
});

25
js/jenot.js
View file

@ -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();
Notes.add({
type: "note",
content: "This is a test note",
});
Notes.add({
type: "tasklist",
content: [
{ checked: false, content: "First item" },
{ checked: true, content: "Second item" },
{ checked: false, content: "Third item" },
],
});
render();
newNote.addEventListener("addNote", (e) => {
Notes.add(e.detail);
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);
});
}