From 25c2e19cb16c5872a43514c5199a0b60d31035d7 Mon Sep 17 00:00:00 2001
From: l3130 <kmett32@gmail.com>
Date: Sun, 7 Dec 2025 11:29:10 +0100
Subject: [PATCH] Update retain.js

---
 js/retain.js | 111 +++++++++++++++++++++++++++++++++------------------
 1 file changed, 73 insertions(+), 38 deletions(-)

diff --git a/js/retain.js b/js/retain.js
index d25d090..44e3e5d 100644
--- a/js/retain.js
+++ b/js/retain.js
@@ -1,61 +1,96 @@
-$(function(){
+document.addEventListener('DOMContentLoaded', () => {
+    'use strict';
 
-    var model = {
-        init: function() {
-            if (!localStorage.notes) {
-                localStorage.notes = JSON.stringify([]);
+    const STORAGE_KEY = 'notes';
+
+    const storage = {
+        init() {
+            if (!localStorage.getItem(STORAGE_KEY)) {
+                localStorage.setItem(STORAGE_KEY, JSON.stringify([]));
+            }
+        },
+        read() {
+            try {
+                const raw = localStorage.getItem(STORAGE_KEY);
+                if (!raw) {
+                    return [];
+                }
+
+                const notes = JSON.parse(raw);
+                return Array.isArray(notes) ? notes : [];
+            } catch (err) {
+                // Reset corrupted storage to a safe empty state.
+                localStorage.setItem(STORAGE_KEY, JSON.stringify([]));
+                return [];
             }
         },
-        add: function(obj) {
-            var data = JSON.parse(localStorage.notes);
-            data.push(obj);
-            localStorage.notes = JSON.stringify(data);
+        write(notes) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));
         },
-        getAllNotes: function() {
-            return JSON.parse(localStorage.notes);
+        add(note) {
+            const notes = this.read();
+            notes.push(note);
+            this.write(notes);
         }
     };
 
+    const octopus = {
+        addNewNote(noteStr) {
+            const content = (noteStr || '').trim();
+            if (!content) {
+                return;
+            }
 
-    var octopus = {
-        addNewNote: function(noteStr) {
-            model.add({
-                content: noteStr
-            });
+            storage.add({ content });
             view.render();
         },
 
-        getNotes: function() {
-            return model.getAllNotes();
+        getNotes() {
+            return storage.read();
         },
 
-        init: function() {
-            model.init();
+        init() {
+            storage.init();
             view.init();
         }
     };
 
+    const view = {
+        init() {
+            this.noteList = document.getElementById('notes');
+            this.newNoteForm = document.getElementById('new-note-form');
+            this.newNoteContent = document.getElementById('new-note-content');
 
-    var view = {
-        init: function() {
-            this.noteList = $('#notes');
-            var newNoteForm = $('#new-note-form');
-            var newNoteContent = $('#new-note-content');
-            newNoteForm.submit(function(e){
-                octopus.addNewNote(newNoteContent.val());
-                newNoteContent.val('');
-                e.preventDefault();
-            });
-            view.render();
+            if (this.newNoteForm) {
+                this.newNoteForm.addEventListener('submit', (event) => {
+                    event.preventDefault();
+                    octopus.addNewNote(this.newNoteContent ? this.newNoteContent.value : '');
+                    if (this.newNoteContent) {
+                        this.newNoteContent.value = '';
+                    }
+                });
+            }
+
+            this.render();
         },
-        render: function(){
-            var htmlStr = '';
-            octopus.getNotes().forEach(function(note){
-                htmlStr += '<li class="note">'+
-                        note.content +
-                    '</li>';
+
+        render() {
+            if (!this.noteList) {
+                return;
+            }
+
+            const notes = octopus.getNotes();
+            this.noteList.innerHTML = '';
+
+            const fragment = document.createDocumentFragment();
+            notes.forEach((note) => {
+                const li = document.createElement('li');
+                li.className = 'note';
+                li.textContent = note.content;
+                fragment.appendChild(li);
             });
-            this.noteList.html( htmlStr );
+
+            this.noteList.appendChild(fragment);
         }
     };