diff --git a/notes/index.html b/notes/index.html
index 9deb6eb..a1a730e 100644
--- a/notes/index.html
+++ b/notes/index.html
@@ -5,10 +5,15 @@
Notes
+
+
+
+
+
@@ -17,7 +22,7 @@
-
Click on "New Note" and click on the new note to open it!
+ Click on "New Note" and click on the new note to open it!
diff --git a/notes/index.js b/notes/index.js
index fd784e0..0377b1c 100644
--- a/notes/index.js
+++ b/notes/index.js
@@ -1,33 +1,151 @@
const newNoteButton = document.getElementById('new-note');
+const stopNote = document.getElementById('stop-note');
const notes = document.querySelector('div[id="notes"]');
const editor = document.getElementById('editor-area');
-const left = document.getElementById('left');
const editingTop = document.getElementById('editing');
+const exportButton = document.getElementById('export');
+const importButton = document.getElementById('import');
let count = 0;
let noteOpen = false;
let currentNote = null;
-newNoteButton.addEventListener('click', () => {
+function getNotesFromCookies() {
+ const notesCookie = document.cookie.split('; ').find(row => row.startsWith('notes='));
+ return notesCookie ? JSON.parse(notesCookie.split('=')[1]) : [];
+}
+
+function saveNotesToCookies(notesArray) {
+ document.cookie = `notes=${JSON.stringify(notesArray)}; path=/; max-age=31536000`;
+}
+
+function createNoteElement(note) {
const newNote = document.createElement('button');
- count++;
newNote.className = "new-note";
- newNote.id = count;
-
- let currentTime = `${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()}, ${new Date().getHours()}:${new Date().getMinutes()}`;
- newNote.innerHTML = `#${count} ${currentTime}`;
-
- notes.appendChild(newNote);
+ newNote.id = note.id;
+ newNote.innerHTML = `#${note.id} ${note.time}`;
newNote.addEventListener('click', () => {
- noteOpen = true;
if (currentNote) {
+ saveCurrentNoteContent();
currentNote.style.backgroundColor = '';
}
+ document.querySelector('h2[class="hint"]').style.opacity = "0";
+ noteOpen = true;
currentNote = newNote;
- document.querySelector('h1[class="hint"]').innerHTML = `Editing #${currentNote.id}`;
editor.style.display = "flex";
+ editor.value = note.content;
currentNote.style.backgroundColor = '#404040';
editingTop.innerHTML = `Editing ${newNote.innerHTML}`;
});
+
+ newNote.addEventListener('mousedown', (e) => {
+ if (e.shiftKey) {
+ renameCurrentNote();
+ }
+ });
+
+ return newNote;
+}
+
+function updateNotesList() {
+ const savedNotes = getNotesFromCookies();
+ notes.innerHTML = '';
+ savedNotes.forEach(note => {
+ const noteElement = createNoteElement(note);
+ notes.appendChild(noteElement);
+ });
+}
+
+function saveCurrentNoteContent() {
+ if (currentNote) {
+ const savedNotes = getNotesFromCookies();
+ const noteIndex = savedNotes.findIndex(note => note.id === parseInt(currentNote.id));
+ if (noteIndex !== -1) {
+ savedNotes[noteIndex].content = editor.value;
+ saveNotesToCookies(savedNotes);
+ }
+ }
+}
+
+function renameCurrentNote() {
+ const newTitle = prompt("Enter new title:");
+ if (newTitle && currentNote) {
+ const savedNotes = getNotesFromCookies();
+ const noteIndex = savedNotes.findIndex(note => note.id === parseInt(currentNote.id));
+ if (noteIndex !== -1) {
+ savedNotes[noteIndex].time = newTitle;
+ saveNotesToCookies(savedNotes);
+ currentNote.innerHTML = `#${savedNotes[noteIndex].id} ${newTitle}`;
+ }
+ }
+}
+
+function exportNotes() {
+ const savedNotes = getNotesFromCookies();
+ const json = JSON.stringify(savedNotes, null, 2);
+ const blob = new Blob([json], { type: 'application/json' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url;
+ a.download = `${new Date().getDate()}_${new Date().getMonth() + 1}_${new Date().getFullYear()} ${new Date().getHours()}_${new Date().getMinutes()}-notes.json`;
+ a.click();
+ URL.revokeObjectURL(url);
+}
+
+function importNotes(event) {
+ const file = event.target.files[0];
+ if (file && file.type === 'application/json') {
+ const reader = new FileReader();
+ reader.onload = () => {
+ try {
+ const importedNotes = JSON.parse(reader.result);
+ console.log(importedNotes);
+ if (Array.isArray(importedNotes)) {
+ saveNotesToCookies(importedNotes);
+ updateNotesList();
+ } else {
+ alert('Invalid JSON structure');
+ }
+ } catch (e) {
+ alert('Failed to parse JSON');
+ console.error('Error parsing JSON:', e);
+ }
+ };
+ reader.readAsText(file);
+ } else {
+ alert('Please select a valid JSON file');
+ }
+}
+
+newNoteButton.addEventListener('click', () => {
+ const currentTime = `${new Date().getDate()}/${new Date().getMonth() + 1}/${new Date().getFullYear()}, ${new Date().getHours()}:${new Date().getMinutes()}`;
+ const newNote = {
+ id: count + 1,
+ time: currentTime,
+ content: '',
+ };
+ count++;
+ const newNoteElement = createNoteElement(newNote);
+ notes.appendChild(newNoteElement);
+
+ const savedNotes = getNotesFromCookies();
+ savedNotes.push(newNote);
+ saveNotesToCookies(savedNotes);
+ updateNotesList();
});
+
+stopNote.addEventListener('click', () => {
+ document.querySelector('h2[class="hint"]').style.opacity = "1";
+ noteOpen = false;
+ if (currentNote) {
+ currentNote.style.backgroundColor = '#303030';
+ saveCurrentNoteContent();
+ }
+ editor.style.display = 'none';
+});
+
+exportButton.addEventListener('click', exportNotes);
+importButton.addEventListener('change', importNotes);
+
+updateNotesList();
diff --git a/notes/style.css b/notes/style.css
index 61cb0e2..a11726e 100644
--- a/notes/style.css
+++ b/notes/style.css
@@ -19,7 +19,8 @@ div.top div#editing {
width: max-content;
}
-div.top > button {
+div.top > button,
+div.top > label {
padding: 8px;
margin: 10px 4px 10px 10px;
cursor: pointer;
@@ -29,11 +30,17 @@ div.top > button {
border-radius: 5px;
}
-div.top > button:not(:nth-child(1)) {
- margin: 10px 4px 10px 4px;
+div.top > input {
+ display: none;
}
-div.top > button:hover {
+div.top > button:not(:nth-child(1)),
+div.top > label:not(:nth-child(1)) {
+ margin: 10px 4px 10px 4px;
+ }
+
+div.top > button:hover,
+div.top > label:hover {
cursor: pointer;
background-color: rgb(42, 42, 42);
color: white;
@@ -93,4 +100,45 @@ button[class="new-note open"] {
box-sizing: border-box;
resize: none;
display: none;
-}
\ No newline at end of file
+}
+
+@media (max-width: 1024px) {
+ div.left {
+ max-width: 50%;
+ }
+
+ #editor-area {
+ width: calc(100% - 150px);
+ left: 150px;
+ }
+}
+
+@media (max-width: 768px) {
+ div.left {
+ max-width: 60%;
+ }
+
+ #editor-area {
+ width: calc(100% - 120px);
+ left: 120px;
+ }
+}
+
+@media (max-width: 480px) {
+ div.left {
+ max-width: 100%;
+ height: auto;
+ position: relative;
+ }
+
+ #editor-area {
+ width: 100%;
+ left: 0;
+ top: auto;
+ position: relative;
+ }
+
+ div.top {
+ position: relative;
+ }
+}