added table switcher demo version

created notes' table builder
icon code updated so they are in same style
added call of refreshing tables function to load local data into the tables

Author: 6mahdapihka9

index.html

@@ -23,7 +23,7 @@ <h1>Hometask #1 | JavaScript</h1>
                     <th class="content">Content</th>
                     <th class="dates">Dates</th>
                     <th class="header-icon">&nbsp;</th>
-                    <th class="header-icon archive" onclick="switchTables()"></th>
+                    <th class="header-icon archive" id="table-switcher"></th>
                     <th class="header-icon delete"></th>
                 </tr>
             </thead>
@@ -32,8 +32,6 @@ <h1>Hometask #1 | JavaScript</h1>
 
 
         <div id="create-note">
-            <button id="build-stats">build-stats</button>
-            <button >Load local data</button>
             <button id="create-note-button">Create Note</button>
         </div>
 

mainThread.js

@@ -1,7 +1,4 @@
-import {
-    loadIconsIntoHeader,
-    notes
-} from './scripts/HTMLBuilder.js';
-
-loadIconsIntoHeader( );
+import { loadIconsIntoHeader, refreshTables } from './scripts/HTMLBuilder.js';
 
+loadIconsIntoHeader();
+refreshTables();

scripts/HTMLBuilder.js

@@ -1,10 +1,12 @@
 import { notes, categories, icons } from './data.js';
-import { makeID, getDatesFromText } from "./functions.js";
-// import { makeID } from "./functions";
+import { makeRandomID, getDatesFromText } from "./functions.js";
+
 
 let statisticsTable = document.getElementById('stats-table'),
     notesTable = document.getElementById('active-archive-table');
 
+let activeNoteTableShown = true;
+
 
 function loadIconsIntoHeader(){
     Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
@@ -31,16 +33,19 @@ function buildForm(name, created, category, content){
 
     form.onsubmit = (event)=>{
         event.preventDefault();
-
-        createNote({
-            id: makeID(10),
+        let note = {
+            id: makeRandomID(10),
             name: event.target.name.value,
             created: new Date(),
             category: event.target.categories.value,
             content: event.target.content.value,
             dates: getDatesFromText(event.target.content.value),
             archived: false
-        });
+        }
+
+        createNote(note);
+
+        document.getElementsByClassName('wrapper-div')[0].remove();
     };
 
 
@@ -68,11 +73,11 @@ function deleteNote(noteID){
 
 function refreshTables(){
     clearAllTables();
+    buildNotesTable();
     buildStatisticTable();
-    // buildNotesTable();
 }
 function clearAllTables(){
-    // clearInnerHTML(notesTable);
+    clearInnerHTML(notesTable);
     clearInnerHTML(statisticsTable);
 }
 function clearInnerHTML(parent){
@@ -123,15 +128,41 @@ function buildStatTr(category, active, total){
 }
 
 function buildNotesTable(){
+    notes.forEach(note => {
+        if (!note.archived === activeNoteTableShown)
+            notesTable.innerHTML += buildNotesTr(note);
+    })
 
 }
+function buildNotesTr(note){
+    return `
+        <tr>
+            <td className="category-icon">${ categories[note.category] }</td>
+            <td className="name">${ note.name }</td>
+            <td className="created">${ note.created.toLocaleDateString() }</td>
+            <td className="category1">${ note.category }</td>
+            <td className="content">${ note.content }</td>
+            <td className="dates">${ note.dates }</td>
+            <td className="row-icon edit"></td>
+            <td className="row-icon archive"></td>
+            <td className="row-icon delete"></td>
+        </tr>
+    `;
+}
 
 export {
     refreshTables,
     loadIconsIntoHeader,
     notes
 }
 
+function switchTables() {
+    activeNoteTableShown = !activeNoteTableShown;
+    clearInnerHTML(notesTable);
+    buildNotesTable();
+    document.getElementsByClassName('header-icon archive')[0].innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON;
+}
 
+document.getElementById("table-switcher").addEventListener("click", switchTables);
 document.getElementById("create-note-button").addEventListener("click", buildForm);
-document.getElementById("build-stats").addEventListener("click", refreshTables);
+// document.getElementById("build-stats").addEventListener("click", refreshTables);

scripts/data.js

@@ -53,7 +53,7 @@ export let notes = [
         category: "Quote",
         content: "Power doesn't come with bla bla bla",
         dates: "",
-        archived: false
+        archived: true
     },
     {
         id: "LI_RUnkMNo",
@@ -62,7 +62,7 @@ export let notes = [
         category: "Task",
         content: "The Lean Statrup",
         dates: "",
-        archived: false
+        archived: true
     },
     // {
     //     name: "",

scripts/functions.js

@@ -1,4 +1,4 @@
-export function makeID (length) {
+export function makeRandomID (length) {
     let result = '',
         chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
 
@@ -7,6 +7,7 @@ export function makeID (length) {
 
     return result;
 }
+
 export function getDatesFromText(text){
     let results = text.match(/[0-9]{1,2}([\-\/ \.])[0-9]{1,2}([\-\/ \.])((19)|(20))[0-9]{2}/g);