final version

+ added comments as function descriptions
 + added delete buttons to close forms
 + refined errorhandling

html/index.html

@@ -24,7 +24,6 @@
         <div class=right>
             <button class="btn btn-default btn-xs" id="refreshButton"><span class="glyphicon glyphicon-refresh"></span></button>
         </div>
-        
         <div id=noteStorage></div>
     </div>
     <div id=addNoteDiv>

scripts/notes_app.js

@@ -1,52 +1,64 @@
 $(document).ready(function(){
 
     $("#addNoteDiv").on('click', function() {
+
+        // Listener für den Plus Button zum hinzufügen von Note Forms.
+
+        console.log("Add")
+
         createForm();
     })
 
     $('#allNotesDiv').on('click', 'button', async function() {
-        //
+        
+        // Listener für den Save Button zum speichern von Note Forms.
+
         console.log("Save")
-        console.log(this)
-        //
 
         let buttonId = (this.id).split("_")[1];
         let type = (this.id).split("_")[0];
-        if (type == 'saveNoteButton'){
+        try {
-            await saveNoteObject(buttonId);
+            if (type == 'saveNoteButton'){
-        } else if (type == 'editNoteButton'){
+                // Speichern einer neuen Note.
-            await saveNoteObject(buttonId, true);
+                await saveNoteObject(buttonId);
+            } else if (type == 'editNoteButton'){
+                // Editieren einer gespeicherten Note.
+                await saveNoteObject(buttonId, true);
+            }
+        } catch(err){
+            alert(err);
         }
-
-        //
-        console.log(buttonId)
-        //
-        
     })
 
     $('#noteStorage').on('click', 'button', async function() {
-        //
+        
+        // Listener für den Delete Button zum Löschen einer Note aus dem Note Browser und Local Storage.
+
         console.log("Delete")
-        console.log(this)
-        //
         
         let buttonId = (this.id).split("_")[1];
-
+        try {
-        //
+            await removeBrowserItem(buttonId);
-        console.log(buttonId)
+        } catch(err) {
-        //
+            alert(err);
-        await removeBrowserItem(buttonId);
+        }
     })
 
     $("#refreshButton").on('click', async function() {
-        //
+        
+        // Listener für den Refresh Button zum aktualisieren der gespeicherten Notes.
+
         console.log("Refresh")
-        //
+        
         createLoadingSign(id="", append="noteStorage");
         enableLoadingSign(id="");
         await sleep(2000);
         disableLoadingSign(id="");
-        await refreshBrowser();
+        try {
+            await refreshBrowser();
+        } catch(err){
+            alert(err);
+        } 
     })
 })
 
@@ -54,22 +66,34 @@ let id=1;
 
 function createForm(){
 
+    // DOM-Schnittstelle zur Erstellung einer NoteForm mit ID-Kennung.
+    // Initialisiert die OnClick-Listener auf den Buttons der Form.
+
     id++;
-    //
+
     console.log("createForm() "+id)
-    //
+    
     let wrapper = document.createElement("div");
     wrapper.setAttribute('id', "note"+id);
     wrapper.style.margin = '2.5px';
     let inputsWrapper = document.createElement("div");
     inputsWrapper.setAttribute('class', "noteDiv");
 
+    let inputDiv = document.createElement("div");
     let input = document.createElement("input");
+    let deleteButton = document.createElement('button');
     input.setAttribute('type', "text");
     input.setAttribute('name',"noteTitle");
     input.setAttribute('id', "inputTitle"+id);
     input.setAttribute('placeholder', "Enter title...");
     input.style.marginBottom='5px';
+    deleteButton.style.marginLeft = '2px';
+    deleteButton.innerHTML = "X";
+    deleteButton.setAttribute('id', "deleteForm_" + id);
+    deleteButton.setAttribute('onClick', "deleteForm(this.id)");
+    deleteButton.setAttribute('class', "right");
+    inputDiv.appendChild(input);
+    inputDiv.appendChild(deleteButton);
     
     let textAreaDiv = document.createElement("div");
     let textarea = document.createElement("textarea");
@@ -86,7 +110,7 @@ function createForm(){
     saveNoteButton.setAttribute('id',"saveNoteButton_"+id);
     saveNoteButton.innerHTML = 'Save';
 
-    inputsWrapper.appendChild(input);
+    inputsWrapper.appendChild(inputDiv);
     inputsWrapper.appendChild(textAreaDiv);
     inputsWrapper.appendChild(saveNoteButton);
     wrapper.appendChild(inputsWrapper);
@@ -94,24 +118,42 @@ function createForm(){
     document.getElementById('allNotesDiv').appendChild(wrapper);
 }
 
+function deleteForm(idName){
+
+    // Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen/Löschen einer Form mit ID-Kennung.
+
+    console.log("deleteForm() " + id);
+
+    id = idName.split("_")[1];
+    document.getElementById("note"+id).remove();
+}
+
 function createFormWithSavedContent(item, id){
-    //
+    
-    console.log("createFormWithSavedContent() "+id)
+    // DOM-Schnittstelle.
-    console.log(item.title);
+    // Holt eine gespeicherte Form aus dem Speicher und erstellt erneut eine Note Form mit alter ID-Kennung und initialisiert die OnClick-Listener auf den Buttons.
-    console.log(item.text);
+
-    //
+    console.log("createFormWithSavedContent() "+ id)
 
     let wrapper = document.createElement("div")
     wrapper.setAttribute('id', "note"+id)
     let inputsWrapper = document.createElement("div")
     inputsWrapper.setAttribute('class', "noteDiv");
 
+    let inputDiv = document.createElement("div");
     let input = document.createElement("input");
+    let deleteButton = document.createElement('button');
     input.setAttribute('type', "text");
     input.setAttribute('name',"noteTitle");
     input.setAttribute('id', "inputTitle"+id);
     input.setAttribute('value', item.title);
     input.style.marginBottom='5px';
+    deleteButton.style.marginLeft = '2px';
+    deleteButton.innerHTML = "X";
+    deleteButton.setAttribute('id', "deleteForm_" + id);
+    deleteButton.setAttribute('onClick', "deleteForm(this.id)");
+    inputDiv.appendChild(input);
+    inputDiv.appendChild(deleteButton);
     
     let textAreaDiv = document.createElement("div");
     let textarea = document.createElement("textarea");
@@ -129,7 +171,7 @@ function createFormWithSavedContent(item, id){
     editNoteButton.setAttribute('id',"editNoteButton_"+id);
     editNoteButton.innerHTML = 'Save';
 
-    inputsWrapper.appendChild(input);
+    inputsWrapper.appendChild(inputDiv);
     inputsWrapper.appendChild(textAreaDiv);
     inputsWrapper.appendChild(editNoteButton);
     wrapper.appendChild(inputsWrapper);
@@ -140,6 +182,12 @@ function createFormWithSavedContent(item, id){
 let ctr;
 
 async function sleep(ms) {
+
+    // Best Practice Variante zum pausieren von Code.
+    // Soll hier Prozesse simulieren die bei synchronem Code zu I/O-Blocking führen würden.
+
+    console.log("sleep() " + ms);
+
     try {
         return new Promise(resolve => setTimeout(resolve, ms));
     }
@@ -148,22 +196,14 @@ async function sleep(ms) {
     }
 }
 
-async function removeNote(id){
-    try {
-        return new Promise(resolve => {
-            localStorage.removeItem('noteObj' + id);
-            removeBrowserItem(id);
-            resolve();
-        });
-    }
-    catch (alert) {
-        return alert(alert);
-    }
-}
-
 async function saveNote(id){
-    try {
+
-        return new Promise(resolve => {
+    // Holt den Inhalt aus der gebindeten Note und speichert diesen als Objekt mit ID-Kennung im Local Storage.
+
+    console.log("saveNote() " + id);
+
+    return new Promise((resolve, reject) => {
+        try {
             let noteTitle = document.getElementById('inputTitle' + id).value;
             let noteText = document.getElementById('noteText' + id).value;
             let noteObj = {
@@ -171,19 +211,24 @@ async function saveNote(id){
                 title: noteTitle,
                 text: noteText
             };
-            let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage
+            let noteObj_serialized = JSON.stringify(noteObj); // Stringify noteObj damit es im LocalStorage lesbar ist.
             localStorage.setItem("noteObj" + id, noteObj_serialized);
             resolve(noteObj);
-        });
+        } catch(err) {
-    }
+            reject(err);
-    catch (alert) {
+        }
-        return alert(alert);
+    });
-    }
 }
 
 async function refreshBrowser(){
-    try {
+
-        return new Promise(resolve => {
+    // Aktualisiert den Browserinhalt nach drücken des Refreshbuttons.
+    // Holt sich zuerst ein Abbild des Local Storage und erstellt dann für jedes Element ein Item im Browser.
+
+    console.log("refreshBrowser()");
+
+    return new Promise((resolve, reject) => {
+        try {
             let noteStorage = [];
             let keys = Object.keys(localStorage);
             let i = keys.length;
@@ -196,43 +241,47 @@ async function refreshBrowser(){
                 createBrowserItem(JSON.parse(element));
             });
             resolve();
-        });
+        } catch(err) {
-    }
+            reject(err);
-    catch (alert) {
+        }
-        return alert(alert);
+    });
-    }
 }
 
 async function saveNoteObject(id, overwrite=false){
-    //
+
-    console.log("saveNoteObject() "+id)
+    // Wird vom Save Button zum Speichern einer Note und Erstellung eines entsprechenden Browseritems aufgerufen.
-    console.log(id)
+    
-    //
+    console.log("saveNoteObject() " + id + " " + overwrite);
+    
     createLoadingSign(id, append="note")
     enableLoadingSign(id);
-    await sleep(10000) //sleep() simulates the delay that would occur when there is a remote server access or similar, 
+    await sleep(10000)
-                       //so instead of sleep would be e.g. saveToRemoteServer()...
-                       //the leftover code of the async function is executed after the delay
     disableLoadingSign(id);
 
-    if (overwrite == true){
+    try {
-        await removeNote(id);
+        if (overwrite == true){
+            await removeBrowserItem(id);
+        }
+        let obj = await saveNote(id);
+        createBrowserItem(obj);
+    } catch(err){
+        alert(err)
     }
-
-    let obj = await saveNote(id);
-    createBrowserItem(obj);
     document.getElementById("note"+id).remove();
 }
 
 function enableLoadingSign(id){
-    console.log("id:"+id);
+
+    console.log("enableLoadingSign() " + id);
+
     let target = 'loadSign'+id;
-    console.log("enableLoadingSign() "+id)
     document.getElementById(target).style.display = "block";
 }
 
 function disableLoadingSign(id){
-    console.log("id:"+id);
+
+    console.log("disableLoadingSign() " + id);
+
     let target = 'loadSign'+id;
     let sign = document.getElementById(target);
     sign.style.display = "none";
@@ -240,11 +289,11 @@ function disableLoadingSign(id){
 }
 
 function createLoadingSign(id, append){
-    console.log("id:"+id);
+
+    console.log("createLoadingSign() " + id);
+
     let target = 'loadSign'+id;
     let appendTo = append+id;
-    console.log(appendTo);
-    console.log("createLoadingSign() "+id)
     let loadingSign = document.createElement('div');
     let loadingSignWrapper = document.createElement('div');
     loadingSign.setAttribute('class', 'loader')
@@ -254,7 +303,11 @@ function createLoadingSign(id, append){
 }
 
 function createBrowserItem(item){
-    console.log(item);
+
+    // DOM-Schnittstelle zur Erstellung eines Browseritems.
+
+    console.log("createBrowserItem() " + item);
+
     let wrapperDiv = document.createElement('div');
     let browserItem = document.createElement('div');
     let deleteButton = document.createElement('button');
@@ -271,34 +324,55 @@ function createBrowserItem(item){
 }
 
 async function removeBrowserItem(id){
-    try {
+
-        return new Promise(resolve => {
+    // DOM-Schnittstelle zum Löschen eines Browseritems.
-            console.log("removeBrowserItem() " + id);
+
+    console.log("removeBrowserItem() " + id);
+
+    return new Promise((resolve, reject) => {
+        try {
             localStorage.removeItem('noteObj' + id);
             document.getElementById("browserItem_" + id).remove();
             document.getElementById("deleteItem_" + id).remove();
             resolve();
-        });
+        } catch(err) {
-    }
+            reject(err);
-    catch (alert) {
+        } 
-        return alert(alert);
+    });
-    }
 }
 
+async function getItemFromStorage(idTmp){
+
+    // Holt ein Note Objekt aus dem Local Storage.
+
+    console.log("getItemFromStorage() " + idTmp);
+
+    return new Promise((resolve, reject) => {
+        try {
+            let item = JSON.parse(localStorage.getItem('noteObj'+idTmp));
+            resolve(item);
+        } catch (err) {
+            reject(err);
+        }
+    });
+}
+
+
 async function getSavedNote(id){
+
+    // Wird durch den OnClick-Listener auf dem Browseritem aufgerufen.
+
     console.log("getSavedNote() "+ id);
+
     createLoadingSign("", "allNotesDiv");
     enableLoadingSign("");
     await sleep(5000);
     disableLoadingSign("");
-    console.log("id before split " + id);
     let idTmp = id.split("_")[1];
-    console.log("idTmp " +idTmp);
+    try {
-    let item = await new Promise(resolve => {
+        let item = await getItemFromStorage(idTmp);
-        let item = JSON.parse(localStorage.getItem('noteObj'+idTmp));
+        createFormWithSavedContent(item, idTmp);
-        console.log("in promise "+item);
+    } catch(err) {
-        resolve(item);
+        alert(err)
-        })
+    }
-    console.log(item);
-    createFormWithSavedContent(item, idTmp);
 }