allow deleting, open note on new note button click, title for rename/delete, change font size for button+label

notes/index.html

@@ -17,7 +17,7 @@
         <span id="editing"></span>
     </div>
     <div class="main">
-        <div class="left" id="left">
+        <div class="left" id="left" title="SHIFT+LMB to RENAME a Note; SHIFT+RMB to DELETE a Note">
             <div id="notes"></div>
         </div>
         <div class="editor" id="editor">

notes/index.js

@@ -40,14 +40,37 @@ function createNoteElement(note) {
     });
 
     newNote.addEventListener('mousedown', (e) => {
-        if (e.shiftKey) {
+        if (e.shiftKey && e.button === 0) {
             renameCurrentNote();
+        } else if (e.shiftKey && e.button === 2) {
+            deleteNote(note.id);
         }
     });
 
+    newNote.addEventListener('contextmenu', (e) => {
+        e.preventDefault();
+    });
+
     return newNote;
 }
 
+function deleteNote(noteId) {
+    if (confirm("Are you sure you want to delete this note?")) {
+        let savedNotes = getNotesFromCookies();
+        savedNotes = savedNotes.filter(note => note.id !== noteId);
+        saveNotesToCookies(savedNotes);
+        updateNotesList();
+
+        if (currentNote && parseInt(currentNote.id) === noteId) {
+            editor.style.display = 'none';
+            document.querySelector('h2[class="hint"]').style.opacity = "1";
+            currentNote = null;
+            noteOpen = false;
+        }
+    }
+}
+
+
 function updateNotesList() {
     const savedNotes = getNotesFromCookies();
     notes.innerHTML = '';
@@ -133,8 +156,11 @@ newNoteButton.addEventListener('click', () => {
     savedNotes.push(newNote);
     saveNotesToCookies(savedNotes);
     updateNotesList();
+    
+    newNoteElement.click();
 });
 
+
 stopNote.addEventListener('click', () => {
     document.querySelector('h2[class="hint"]').style.opacity = "1";
     noteOpen = false;

notes/style.css

@@ -28,6 +28,7 @@ div.top > label {
     color: white;
     border: 2px solid #242424;
     border-radius: 5px;
+    font-size: 14px;
 }
 
 div.top > input {