From 4beabb375dbe53672277305036f0f7c58be864c2 Mon Sep 17 00:00:00 2001 From: gauravghodinde Date: Mon, 18 Mar 2024 00:38:48 +0530 Subject: [PATCH 1/3] updated readme --- README.md | 11 +++++++++++ index.html | 16 ++++++++++++---- js/NotesView.js | 50 +++++++++++++++++++++++++++++++++++++++++++++++-- js/main.js | 1 + 4 files changed, 72 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c1f22ec..3c93c31 100644 --- a/README.md +++ b/README.md @@ -6,6 +6,17 @@ Note Generator is a note-taking app for the web. It is a static site without a database, notes are persisted temporarily in local storage + +It provides following features + +1. Adding a note +2. Updating the note +3. Deleting any note by double-clicking it +4. Sort the notes by updated date +5. Uses local storage hence data is available even after refreshing or closing window and safe also as it does not sends it anywhere +6. drag and drop the notes in starred category +7. night mode to make it developer friendly XD + ## Pre Installation - [ ] Install the live - server extension in your favorite text editor( ...really helpful) diff --git a/index.html b/index.html index b9f305f..12ee8ce 100644 --- a/index.html +++ b/index.html @@ -9,10 +9,17 @@
- +
+ diff --git a/js/NotesView.js b/js/NotesView.js index 2d104ed..14bbc06 100644 --- a/js/NotesView.js +++ b/js/NotesView.js @@ -8,7 +8,8 @@ export default class NotesView { this.root.innerHTML = `
-
+
+
@@ -19,6 +20,8 @@ export default class NotesView { const btnAddNote = this.root.querySelector(".notes__add"); const inpTitle = this.root.querySelector(".notes__title"); const inpBody = this.root.querySelector(".notes__body"); + const draggables = document.querySelectorAll('.draggable') + const containers = document.querySelectorAll('.container') btnAddNote.addEventListener("click", () => { this.onNoteAdd(); @@ -34,13 +37,37 @@ export default class NotesView { }); this.updateNotePreviewVisibility(false); + + draggables.forEach(draggable => { + draggable.addEventListener('dragstart', () => { + draggable.classList.add('dragging') + }) + + draggable.addEventListener('dragend', () => { + draggable.classList.remove('dragging') + }) + }) + + containers.forEach(container => { + container.addEventListener('dragover', e => { + e.preventDefault() + document.head.title = "dragging" + const afterElement = getDragAfterElement(container, e.clientY) + const draggable = document.querySelector('.dragging') + if (afterElement == null) { + container.appendChild(draggable) + } else { + container.insertBefore(draggable, afterElement) + } + }) + }) } _createListItemHTML(id, title, body, updated) { const MAX_BODY_LENGTH = 60; return ` -
+
${title}
${body.substring(0, MAX_BODY_LENGTH)} @@ -95,4 +122,23 @@ export default class NotesView { updateNotePreviewVisibility(visible) { this.root.querySelector(".notes__preview").style.visibility = visible ? "visible" : "hidden"; } + + + + + + getDragAfterElement(container, y) { + const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')] + + return draggableElements.reduce((closest, child) => { + const box = child.getBoundingClientRect() + const offset = y - box.top - box.height / 2 + if (offset < 0 && offset > closest.offset) { + return { offset: offset, element: child } + } else { + return closest + } + }, { offset: Number.NEGATIVE_INFINITY }).element + } } + diff --git a/js/main.js b/js/main.js index 0f64179..96327d3 100644 --- a/js/main.js +++ b/js/main.js @@ -2,3 +2,4 @@ import App from "./App.js"; const root = document.getElementById("app"); const app = new App(root); + From a5ce07d98cba128b45eb6978a55e3b373e2b2bbb Mon Sep 17 00:00:00 2001 From: gauravghodinde Date: Mon, 18 Mar 2024 00:39:24 +0530 Subject: [PATCH 2/3] updated readme --- README.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/README.md b/README.md index 3c93c31..40b342c 100644 --- a/README.md +++ b/README.md @@ -7,15 +7,6 @@ Note Generator is a note-taking app for the web. It is a static site without a database, notes are persisted temporarily in local storage -It provides following features - -1. Adding a note -2. Updating the note -3. Deleting any note by double-clicking it -4. Sort the notes by updated date -5. Uses local storage hence data is available even after refreshing or closing window and safe also as it does not sends it anywhere -6. drag and drop the notes in starred category -7. night mode to make it developer friendly XD ## Pre Installation From 74e0a212118a27ac4b55defd9af747ec77d37464 Mon Sep 17 00:00:00 2001 From: gauravghodinde Date: Mon, 18 Mar 2024 00:44:55 +0530 Subject: [PATCH 3/3] added oveflow hidden --- css/main.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/main.css b/css/main.css index e80cb3a..2c253ba 100644 --- a/css/main.css +++ b/css/main.css @@ -51,6 +51,10 @@ body { .notes__small-title, .notes__small-updated { padding: 10px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } .notes__small-title {