async await sleep

css/notes_app.css

     border:1px black solid;
 }
 
-#saveProgressDiv{
-    display: none;
-}
-
-#saveProgress{
+progress {
     width: 312px;
 }

html/index.html

     </div>
     <div id=allNotesDiv>
     </div>
-    <div id=saveProgressDiv>
-        <progress id=saveProgress value=0 max=100></progress>
-    </div>
 </body>
 </html>

scripts/notes_app.js

     $('#allNotesDiv').on('click', 'button', function() {
         console.log("1")
         console.log(this)
-        //$("#saveProgressDiv").toggle();
-        //saveNoteObject(this);
+        let buttonId = (this.id).split("saveNoteButton")[1];
+        console.log(buttonId)
+        createProgressBar(buttonId);
+        saveNoteObject(buttonId);
     })
 })
 
-function randomId(){
-        return '_' + Math.random().toString(36).substr(2,9);
-    };
+let id=0;
 
 function createForm(){
-    let id = randomId()
 
+    id++;
     let wrapper = document.createElement("div")
+    wrapper.setAttribute('id', id)
     let inputsWrapper = document.createElement("div")
-    //let form = document.createElement("form");
     inputsWrapper.setAttribute('class', "noteDiv");
 
     let input = document.createElement("input");
 
 let ctr;
 
-function saveNoteObject(a){
-    console.log(a)
-    //ctr = setInterval(progressBar, 1000); //simulate delay for saving note
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+async function saveNoteObject(id){
 
-    let noteTitle = document.getElementById('inputTitle').value;
-    let noteText = document.getElementById('noteText').value; 
+    console.log(id)
+    await sleep(10000) //sleep simulates the 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
+    
+    
+    let noteTitle = document.getElementById('inputTitle'+id).value;
+    let noteText = document.getElementById('noteText'+id).value; 
     let noteObj = {
+        idK: id,
         title: noteTitle,
         text: noteText
     };
     console.log(noteObj_serialized)
 }
 
-function progressBar(){
-    document.getElementById('saveProgress').value = 
-    document.getElementById('saveProgress').value + 5;
-    if (document.getElementById('saveProgress').value == 100){
+function enableProgressBar(id){
+    console.log('pBar'+id)
+    document.getElementById('pBar'+id).value = 
+    document.getElementById('pBar'+id).value + 5;
+    if (document.getElementById('pBar'+id).value == 100){
         clearInterval(ctr);
     }
 }
 
+function createProgressBar(id){
 
-
-
-
-function getNoteObject(){
-    
+    let progressBar = document.createElement('progress');
+    let progressBarWrapper = document.createElement('div');
+    progressBarWrapper.setAttribute('class', 'pBars')
+    progressBar.setAttribute('value', '0');
+    progressBar.setAttribute('max', '100');
+    progressBar.setAttribute('id', 'pBar'+id);
+    progressBarWrapper.appendChild(progressBar);
+    document.getElementById(id).appendChild(progressBarWrapper);
 }