Added dynamic creation of the note form divs

css/notes_app.css

@@ -15,23 +15,17 @@ body{
     padding:2.5px;
 }
 
-#noteFormDiv{
-    display: none;
-}
-
-#noteForm{
+.noteDiv{
     padding:5px;
     margin-top:2px;
     display: inline-block;
     border:1px black solid;
 }
 
-#noteText{
-    width: 300px;
-    height: 150px;
-    box-sizing: border-box;
+#saveProgressDiv{
+    display: none;
 }
 
-#inputTitle{
-    margin-bottom:5px;
+#saveProgress{
+    width: 312px;
 }

html/index.html

@@ -20,14 +20,10 @@
     <div id=addNoteDiv>
         <button type="button" id=addNoteButton>+</button>
     </div>
-    <div id=noteFormDiv>
-        <form id=noteForm>
-            <input type="text" name="noteTitle" id="inputTitle" placeholder="Enter title...">
-            <div>
-                <textarea name=noteText id=noteText placeholder="Enter notes..."></textarea> 
-            </div>
-            <button type="button" id=saveNoteButton>Save</button>
-        </form>   
+    <div id=allNotesDiv>
+    </div>
+    <div id=saveProgressDiv>
+        <progress id=saveProgress value=0 max=100></progress>
     </div>
 </body>
 </html>

scripts/notes_app.js

@@ -1,25 +1,91 @@
 $(document).ready(function(){
+
     $("#addNoteDiv").on('click', function() {
-        $("#noteFormDiv").toggle()
+        createForm();
+    })
+
+    $('#allNotesDiv').on('click', 'button', function() {
+        console.log("1")
+        console.log(this)
+        //$("#saveProgressDiv").toggle();
+        //saveNoteObject(this);
     })
-    $("#saveNoteButton").click(getNoteObject);
 })
 
-const noteFolder = "C:\\Users\\wuest\\Desktop\\Studium\\Master\\MDT5\\Hofmann\\Praktikum\\WebApp\\notes\\";
+function randomId(){
+        return '_' + Math.random().toString(36).substr(2,9);
+    };
 
-function saveNoteObject(){
-    let noteTitle = document.getElementById('inputTitle').value;
-    let noteText = document.getElementById('noteText').value;
+function createForm(){
+    let id = randomId()
+
+    let wrapper = document.createElement("div")
+    let inputsWrapper = document.createElement("div")
+    //let form = document.createElement("form");
+    inputsWrapper.setAttribute('class', "noteDiv");
+
+    let input = document.createElement("input");
+    input.setAttribute('type', "text");
+    input.setAttribute('name',"noteTitle");
+    input.setAttribute('id', "inputTitle"+id);
+    input.setAttribute('placeholder', "Enter 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('placeholder', "Enter notes...");
+    textarea.style.width='300px';
+    textarea.style.height='150px';
+    textarea.style.boxSizing='border-box';
+    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',"saveNoteButton"+id);
+    btn.innerHTML = 'Save';
+
+    inputsWrapper.appendChild(input);
+    inputsWrapper.appendChild(div1);
+    inputsWrapper.appendChild(btn);
+    wrapper.appendChild(inputsWrapper);
+
+    document.getElementById('allNotesDiv').appendChild(wrapper);
+}
+
+let ctr;
 
+function saveNoteObject(a){
+    console.log(a)
+    //ctr = setInterval(progressBar, 1000); //simulate delay for saving note
+
+    let noteTitle = document.getElementById('inputTitle').value;
+    let noteText = document.getElementById('noteText').value; 
     let noteObj = {
         title: noteTitle,
         text: noteText
     };
-
-    let noteObj_serialized = JSON.stringify(noteObj);
+    let noteObj_serialized = JSON.stringify(noteObj); //stringify noteObj so it is displayed properly when set to local Storage
     localStorage.setItem("noteObj", noteObj_serialized);
+
+    console.log(noteObj_serialized)
+}
+
+function progressBar(){
+    document.getElementById('saveProgress').value = 
+    document.getElementById('saveProgress').value + 5;
+    if (document.getElementById('saveProgress').value == 100){
+        clearInterval(ctr);
+    }
 }
 
+
+
+
+
 function getNoteObject(){
     
 }