updated

Author: wallythewebdev

README.md

@@ -4,7 +4,7 @@ See the live site here:
 
 http://wallythewebdev.com/Notables/
 
-This is a note apliaction built out using Pure JS - 
+This is a note apliaction built out using Vanilla JS - 
 
 I intend to have several versions of this aplcation: 
 
@@ -18,15 +18,15 @@ v2 - aplcation uses local storage of the device to keep a record of the notes ta
 
 V2.1 REWORKING 
 
-    1) re work the moudle layout of the JS - 
+    1) re work the moudle layout of the JS - :: completed
 
-    controller: controlls buttons of app
+    controller: controlls buttons of app :: completed
 
-    UIControlls: controlls inputs
+    UIControlls: controlls inputs :: completed
 
-    NoteApp: controlls maths
+    NoteApp: controlls maths 
 
-    2) add DOMstrings to prevent unwanted bugs from change in classNames down the track
+    2) add DOMstrings to prevent unwanted bugs from change in classNames down the track :: completed
 
     3) re-work the functions to be private - use of IIFE and return i.e. 
 
@@ -39,6 +39,15 @@ V2.1 REWORKING
         }
     })()
 
+    :: completd 
+
+    3) storing data - create a function constructor for the data being stored: this will allow functions to be assigned to that data VIA 
+    the prototype chain
+
+    4) update the created notes > to be inputted via inputAdjacentHTML rather than appending multiple child elements
+
+    5) restructure the data of how the note details are being held
+
 v3 - additional reporting to be added, so, user may better understand there ability to fulfill tasks
 
 v4 - log on system to be implimented so data can be accsessed from multiple platforms

index.html

@@ -14,25 +14,24 @@ <h1>Notables</h1>
         <!-- need a input -->
         <!-- this will be a form and a submit for the form -->
 
-        <form>
-            <input type="text" name="noteTitle" placeholder="note title" required>
-            <input type="text" name="noteDescription" placeholder="description" required>
+        
+            
 
-            <input type="submit" onClick="uiControlls.getNote()">
-        </form>
-        <div class="option_holder">
-            <button class="option" onclick="pushData.saveNotes()">Save Notes</button>
-            <button class="option" onclick="#">Note History</button>
-            <button class="option" onclick="pushData.pullLocal()">Load Notes</button>
-            <button class="option" onclick="generalCommands.clearNotes()">Clear All</button>
+        <div class="input_fields">  
+        <input class="noteTitle" type="text" name="noteTitle" placeholder="note title">
+        <input class="noteDescription" type="text" name="noteDescription" placeholder="description">
+        <button class="noteSubmit">SUBMIT</button>
         </div>
-        <div class="warningBox">
-            <p class="warningMessage">This will delete all notes that have not been saved yet</p>
-            <button class="YES">Yes</button>
-            <button class="NO">No</button>
+
+        <div class="option_holder">
+            <button class="option save_Note" >Save Notes</button>
+            <button class="option note_history" >Note History</button>
+            <button class="option load_note" >Load Notes</button>
+            <button class="option clear_all" >Clear All</button>
         </div>
+        
         <section>
-            <!-- <div class="note">
+            <!--<div class="note">
                 <div class="details">
                 <h2 class="title">Meditate</h2>
                 <p class="description">Today it would be great to mediation for a little bit and keep my headspace score alive</p>
@@ -43,6 +42,8 @@ <h2 class="title">Meditate</h2>
                 </div>
             </div> -->
 
+            
+
         </section>
 
         <!-- need somewhere to display the notes that currently I have -->
@@ -56,5 +57,6 @@ <h2 class="title">Meditate</h2>
 
 
         <script src="script.js"></script>
+        <script src="script2.js"></script>
     </body>
 </html>

main.css

@@ -18,7 +18,7 @@ h1 {
 }
 
 
-form {
+.input_fields {
 
     height: 50vh;
     display: flex;
@@ -87,7 +87,7 @@ button {
     background: lightcoral;
     width: 40%;
     height: 30px;
-    margin: 5%;
+    margin: 25px auto;
     border: none;
     color: white;
     font-size: 1rem;
@@ -185,50 +185,5 @@ footer {
 }
 
 
-/* *******************
-    MESSAGES / WARNINGS
-******************** */
-
-.warningBox {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    width: 90%;
-    margin: 25px auto;
-    padding: 25px 10px;
-    text-align: center;
-    background-color: rgb(0,0,0,0.6);
-    border-radius: 25px;
-
-    max-height: 500px;
-
-    transition: 0.5s ease-in-out;
-
-    height: 0px;
-    z-index: 0;
-    opacity: 0;
-}
 
-.warningBox_show {
-    height: 100%;
-    z-index: 10;
-    opacity: 1;
-}
-
-
-.warningBox p {
-    color: white;
-}
-
-.warningBox button {
-    height: 50px;
-}
-
-.warningBox button.YES {
-    background-color: lightgreen;
-}
-
-.warningBox button.YES {
-    background-color: lightskyblue;
-}