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

@@ -66,7 +66,8 @@ let id=1;
 
 function createForm(){
 
-    // Erstellt eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form
+    // DOM-Schnittstelle zur Erstellung einer NoteForm mit ID-Kennung.
+    // Initialisiert die OnClick-Listener auf den Buttons der Form.
 
     id++;
 
@@ -119,7 +120,7 @@ function createForm(){
 
 function deleteForm(idName){
 
-    // Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen der Form
+    // Aktiviert durch OnClickListener auf dem X-Button innerhalb der Form zum Schließen/Löschen einer Form mit ID-Kennung.
 
     console.log("deleteForm() " + id);
 
@@ -129,7 +130,8 @@ function deleteForm(idName){
 
 function createFormWithSavedContent(item, id){
     
-    // Holt eine gespeicherte Form aus dem Speicher und erstellt erneut eine NoteForm und initialisiert die OnClick-Listener auf den Buttons der Form
+    // DOM-Schnittstelle.
+    // 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("createFormWithSavedContent() "+ id)
 
@@ -181,8 +183,8 @@ 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
+    // 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);
 
@@ -194,25 +196,10 @@ async function sleep(ms) {
     }
 }
 
-async function removeNote(id){
-
-    // Löscht eine Note aus dem Note Browser
-
-    console.log("removeNote() " + id);
-
-    return new Promise((resolve, reject) => {
-        try {
-            localStorage.removeItem('noteObj' + id);
-            removeBrowserItem(id);
-            resolve();
-        } catch(err) {
-            reject(err);
-        }
-    });
-}
-
 async function saveNote(id){
 
+    // 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) => {
@@ -224,7 +211,7 @@ 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) {
@@ -235,6 +222,9 @@ async function saveNote(id){
 
 async function refreshBrowser(){
 
+    // 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) => {
@@ -258,19 +248,19 @@ async function refreshBrowser(){
 }
 
 async function saveNoteObject(id, overwrite=false){
+
+    // Wird vom Save Button zum Speichern einer Note und Erstellung eines entsprechenden Browseritems aufgerufen.
     
     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, 
-                       //so instead of sleep would be e.g. saveToRemoteServer()...
-                       //the leftover code of the async function is executed after the delay
+    await sleep(10000)
     disableLoadingSign(id);
 
     try {
         if (overwrite == true){
-            await removeNote(id);
+            await removeBrowserItem(id);
         }
         let obj = await saveNote(id);
         createBrowserItem(obj);
@@ -314,6 +304,8 @@ function createLoadingSign(id, append){
 
 function createBrowserItem(item){
 
+    // DOM-Schnittstelle zur Erstellung eines Browseritems.
+
     console.log("createBrowserItem() " + item);
 
     let wrapperDiv = document.createElement('div');
@@ -333,6 +325,8 @@ function createBrowserItem(item){
 
 async function removeBrowserItem(id){
 
+    // DOM-Schnittstelle zum Löschen eines Browseritems.
+
     console.log("removeBrowserItem() " + id);
 
     return new Promise((resolve, reject) => {
@@ -349,6 +343,8 @@ async function removeBrowserItem(id){
 
 async function getItemFromStorage(idTmp){
 
+    // Holt ein Note Objekt aus dem Local Storage.
+
     console.log("getItemFromStorage() " + idTmp);
 
     return new Promise((resolve, reject) => {
@@ -364,6 +360,8 @@ async function getItemFromStorage(idTmp){
 
 async function getSavedNote(id){
 
+    // Wird durch den OnClick-Listener auf dem Browseritem aufgerufen.
+
     console.log("getSavedNote() "+ id);
 
     createLoadingSign("", "allNotesDiv");