note app basic finished

css/notes_app.css

@@ -5,6 +5,22 @@ body{
     font-size:16px;
 }
 
+#storageBrowser{
+    margin-bottom:2.5px;
+    border:1px black solid;
+    width: 300px;
+}
+
+#storageBrowserHeader{
+    display: inline-block;
+    border-bottom:1px black solid;
+    border-right: 1px black solid;
+}
+
+#refreshButtonDiv{
+    float: right;
+}
+
 #mainHeader h1{
     margin:0;
     padding:2.5px;
@@ -22,6 +38,10 @@ body{
     border:1px black solid;
 }
 
+.browserElement{
+    display: flex;
+}
+
 .loader {
     border: 3.2px solid #f3f3f3;
     border-radius: 50%;

html/index.html

@@ -17,6 +17,13 @@
             A sample note web app to demonstrate the usage of Promises/Async/Await.
         </h6>
     </div>
+    <div id=storageBrowser>
+        <div id=storageBrowserHeader>All Notes</div>
+        <div id=refreshButtonDiv>
+            <button type="button" id=refreshButton>R</button>
+        </div>
+        <div id=noteStorage></div>
+    </div>
     <div id=addNoteDiv>
         <button type="button" id=addNoteButton>+</button>
     </div>

scripts/notes_app.js

@@ -5,21 +5,49 @@ $(document).ready(function(){
     })
 
     $('#allNotesDiv').on('click', 'button', function() {
-        console.log("1")
+        console.log("Add")
         console.log(this)
-        let buttonId = (this.id).split("saveNoteButton")[1];
+        let buttonId = (this.id).split("_")[1];
+        let type = (this.id).split("_")[0];
+        if (type == 'saveNoteButton'){
+            saveNoteObject(buttonId);
+        } else if (type == 'editNoteButton'){
+            saveNoteObject(buttonId, true);
+        }
         console.log(buttonId)
-        saveNoteObject(buttonId);
+        
+    })
+
+    $('#noteStorage').on('click', 'button', function() {
+        console.log("Delete")
+        console.log(this)
+        let buttonId = (this.id).split("_")[1];
+        console.log(buttonId)
+        removeBrowserItem(buttonId);
+    })
+
+    //$('.browserElement').on('click', 'div', function() {
+    //    console.log("Load");
+    //    console.log(this);
+    //    let divId = (this.id).split("_")[1];
+    //   console.log(divId);
+    //    getSavedNote(divId);
+    //})
+
+    $("#refreshButton").on('click', function() {
+        console.log("Refresh")
+        updateNoteBrowser();
     })
 })
 
-let id=0;
+let id=1;
 
 function createForm(){
-
+    
     id++;
+    console.log("createForm() "+id)
     let wrapper = document.createElement("div")
-    wrapper.setAttribute('id', id)
+    wrapper.setAttribute('id', "note"+id)
     let inputsWrapper = document.createElement("div")
     inputsWrapper.setAttribute('class', "noteDiv");
 
@@ -44,7 +72,55 @@ function createForm(){
     div2.setAttribute('id', 'buttonDiv'+id)
     let btn = document.createElement("button");
     btn.setAttribute('type',"button");
-    btn.setAttribute('id',"saveNoteButton"+id);
+    btn.setAttribute('id',"saveNoteButton_"+id);
+    btn.innerHTML = 'Save';
+
+    inputsWrapper.appendChild(input);
+    inputsWrapper.appendChild(div1);
+    inputsWrapper.appendChild(btn);
+    wrapper.appendChild(inputsWrapper);
+
+    document.getElementById('allNotesDiv').appendChild(wrapper);
+}
+
+function createFormWithSavedContent(id){
+
+    console.log("createFormWithSavedContent() "+id)
+    item = JSON.parse(localStorage.getItem('noteObj'+id))
+
+    console.log(item.title);
+    console.log(item.text);
+
+    let wrapper = document.createElement("div")
+    wrapper.setAttribute('id', "note"+id)
+    let inputsWrapper = document.createElement("div")
+    inputsWrapper.setAttribute('class', "noteDiv");
+
+    let input = document.createElement("input");
+    input.setAttribute('type', "text");
+    input.setAttribute('name',"noteTitle");
+    input.setAttribute('id', "inputTitle"+id);
+    input.setAttribute('value', item.title);
+    //document.getElementById("inputTitle"+id).value = item.title;
+    input.style.marginBottom='5px';
+
+    let div1 = document.createElement("div");
+    let textarea = document.createElement("textarea");
+    textarea.setAttribute('name',"noteText");
+    textarea.setAttribute('id', "noteText"+id);
+    textarea.setAttribute('value', item.text);
+    textarea.innerHTML = item.text;
+    textarea.style.width='300px';
+    textarea.style.height='150px';
+    textarea.style.boxSizing='border-box';
+    //document.getElementById('noteText'+id).value = item.text;
+    div1.appendChild(textarea);
+
+    let div2 = document.createElement("div")
+    div2.setAttribute('id', 'buttonDiv'+id)
+    let btn = document.createElement("button");
+    btn.setAttribute('type',"button");
+    btn.setAttribute('id',"editNoteButton_"+id);
     btn.innerHTML = 'Save';
 
     inputsWrapper.appendChild(input);
@@ -61,8 +137,9 @@ function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
   }
 
-async function saveNoteObject(id){
+async function saveNoteObject(id, overwrite=false){
 
+    console.log("saveNoteObject() "+id)
     console.log(id)
     enableLoadingSign(id);
     await sleep(10000) //sleep simulates the remote server access or similar, 
@@ -70,6 +147,11 @@ async function saveNoteObject(id){
                        //the leftover code of the async function is executed after the delay
     disableLoadingSign(id);
     
+    if (overwrite == true){
+        localStorage.removeItem('noteObj'+id);
+        removeBrowserItem(id);
+    }
+
     let noteTitle = document.getElementById('inputTitle'+id).value;
     let noteText = document.getElementById('noteText'+id).value; 
     let noteObj = {
@@ -78,12 +160,16 @@ async function saveNoteObject(id){
         text: noteText
     };
     let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage
-    localStorage.setItem("noteObj", noteObj_serialized);
+    localStorage.setItem("noteObj"+id, noteObj_serialized);
+    createBrowserItem(noteObj);
 
     console.log(noteObj_serialized)
+
+    document.getElementById("note"+id).remove();
 }
 
 function enableLoadingSign(id){
+    console.log("enableLoadingSign() "+id)
     createLoadingSign(id)
     document.getElementById('loadSign'+id).style.display = "block";
 }
@@ -95,15 +181,61 @@ function disableLoadingSign(id){
 }
 
 function createLoadingSign(id){
-
+    console.log("createLoadingSign() "+id)
     let loadingSign = document.createElement('div');
     let loadingSignWrapper = document.createElement('div');
     loadingSign.setAttribute('class', 'loader')
     loadingSign.setAttribute('id', 'loadSign'+id);
     loadingSignWrapper.appendChild(loadingSign);
-    document.getElementById(id).appendChild(loadingSignWrapper);
+    document.getElementById("note"+id).appendChild(loadingSignWrapper);
+}
+
+function updateNoteBrowser(){
+
+    let noteStorage = [];
+    let keys = Object.keys(localStorage);
+    let i = keys.length;
+
+    while ( i-- ) {
+        noteStorage.push(localStorage.getItem(keys[i]));
+    }
+
+    localStorage.clear();
+
+    noteStorage.forEach(element => {
+        createBrowserItem(JSON.parse(element))
+    });
+
+}
+
+function createBrowserItem(item){
+    console.log(item);
+    let wrapperDiv = document.createElement('div');
+    let browserItem = document.createElement('div');
+    let button = document.createElement('button');
+    wrapperDiv.setAttribute('class', 'browserElement');
+    browserItem.innerHTML = item.title;
+    button.innerHTML = "X";
+    browserItem.setAttribute('id', "browserItem_"+item.idK);
+    browserItem.setAttribute('onClick', "getSavedNote(this.id)");
+    button.setAttribute('id', "deleteItem_" + item.idK);
+    wrapperDiv.appendChild(browserItem);
+    wrapperDiv.appendChild(button);
+    document.getElementById('noteStorage').appendChild(wrapperDiv);
 }
 
+function removeBrowserItem(id){
+    console.log("removeBrowserItem() "+id)
+    localStorage.removeItem('noteObj'+id);
+    document.getElementById("browserItem_"+id).remove();
+    document.getElementById("deleteItem_"+id).remove();
+}
+
+function getSavedNote(id){
+    console.log("getSavedNote() "+ id);
+    let idTmp = id.split("_")[1];
+    createFormWithSavedContent(idTmp);
+}