table styles final update (added colgroup to fix table cells sizes)

commented code erased
styles of form wrapper update (made it fixed to screen)
textarea instead of input[text] in form
text color changed to gray

Author: 6mahdapihka9

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <title>Title</title>
     <link rel="stylesheet" href="styles/general.css">
-    <link rel="stylesheet" href="styles/main.css">
     <link rel="stylesheet" href="styles/table-styles.css">
     <link rel="stylesheet" href="styles/form-styles.css">
 </head>
@@ -13,15 +12,27 @@
         <h1>Hometask #1 | JavaScript</h1>
     </header>
     <main>
+        <h3 id="table-name">Active notes</h3>
         <table>
+            <colgroup>
+                <col class="category-icon">
+                <col class="name">
+                <col class="created">
+                <col class="category1">
+                <col class="content">
+                <col class="dates">
+                <col class="active-icon">
+                <col class="active-icon">
+                <col class="active-icon">
+            </colgroup>
             <thead>
                 <tr>
-                    <th class="category-icon">&nbsp;</th>
-                    <th class="name">Name</th>
-                    <th class="created">Created</th>
-                    <th class="category1">Category</th>
-                    <th class="content">Content</th>
-                    <th class="dates">Dates</th>
+                    <th>&nbsp;</th>
+                    <th>Name</th>
+                    <th>Created</th>
+                    <th>Category</th>
+                    <th>Content</th>
+                    <th>Dates</th>
                     <th class="header-icon">&nbsp;</th>
                     <th class="header-icon archive" id="table-switcher"></th>
                     <th class="header-icon delete"></th>
@@ -32,16 +43,24 @@ <h1>Hometask #1 | JavaScript</h1>
 
 
         <div id="create-note">
+            <div id="announcer"></div>
             <button id="create-note-button">Create Note</button>
         </div>
 
         <table>
+
+            <colgroup>
+                <col class="category-icon">
+                <col class="category2">
+                <col class="active">
+                <col class="archived">
+            </colgroup>
             <thead>
                 <tr>
-                    <th class="stats-icon">&nbsp;</th>
-                    <th class="category2">Note Category</th>
-                    <th class="active">Active</th>
-                    <th class="archived">Archived</th>
+                    <th>&nbsp;</th>
+                    <th>Note Category</th>
+                    <th>Active</th>
+                    <th>Archived</th>
                 </tr>
             </thead>
             <tbody id="stats-table"></tbody>

scripts/HTMLBuilder.js

@@ -1,45 +1,78 @@
 import { notes, categories, icons } from './data.js';
 import { makeRandomID, getDatesFromText } from "./functions.js";
 
-
 let statisticsTable = document.getElementById('stats-table'),
-    notesTable = document.getElementById('active-archive-table');
-
-let activeNoteTableShown = true;
-
+    notesTable = document.getElementById('active-archive-table'),
+    activeNoteTableShown = true;
 
+//dynamic loading svg icons so they could be styled
 function loadIconsIntoHeader(){
     Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
         if (col.classList.contains('archive'))
             col.innerHTML = icons.ARCHIVE_ICON;
         if (col.classList.contains('delete'))
             col.innerHTML = icons.DELETE_ICON;
-        // Array.from(col.getElementsByTagName('path')).forEach( path => path.classList.add('header-icon'));
     });
 }
 
+//Note function
+function createNote(note){
+    notes.push(note);
+    refreshTables();
+    showAnnouncer('Note created successfully!');
+}
+function updateNote(note){
+    notes.splice(notes.findIndex(n => n.id === note.id),1, note);
+    refreshTables();
+    showAnnouncer('Note updated successfully!');
+}
+function deleteNote(noteID){
+    notes.splice(notes.indexOf(notes.find(note => note.id === noteID)),1);
+    document.getElementById(noteID).remove();
+    clearInnerHTML(statisticsTable);
+    buildStatisticTable();
+    showAnnouncer('Note deleted successfully!');
+}
+function changeArchiveState(note){
+    notes[notes.findIndex(n => n.id === note.id)].archived = !notes[notes.findIndex(n => n.id === note.id)].archived;
+    refreshTables()
+    showAnnouncer(`Note ${(activeNoteTableShown)? 'archived' : 'unarchived'} successfully!`);
+}
+
+//announcer for users activity
+function showAnnouncer(text){
+    let announcer = document.getElementById('announcer')
+    announcer.style.opacity = '1';
+    announcer.innerText = text;
+    setTimeout(()=>{ announcer.style.opacity = '0' }, 1500);
+}
+
 function buildForm(note){
     let form = document.createElement('form');
 
     form.innerHTML = `
-        <input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name">
+        <input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name" required>
         <select name="categories">
         ` + Object.keys(categories).map(c => `<option value="${c}" ${note.category === c? 'selected' : ''}>${c}</option>`) + `
         </select>
-        <input type="text" name="content" value="${note.content? note.content : ''}" placeholder="Content">
-        <input type="submit" value="Submit"> 
+        <textarea name="content" placeholder="Content">${note.content? note.content : ''}</textarea>
+        <input class="cancel" type="button" value="Cancel">
+        <input id="submit-button" type="submit" value="Submit" > 
     `;
+    form.getElementsByClassName('cancel')[0].addEventListener("click", ()=>{
+        document.getElementsByClassName('wrapper-div')[0].remove();
+    });
 
     form.onsubmit = (event)=>{
         event.preventDefault();
         let newNote = {
-            id: (note)? note.id : makeRandomID(10),
+            id: (typeof note.name === "string")? note.id : makeRandomID(10),
             name: event.target.name.value,
-            created: (note)? note.created : new Date(),
+            created: (typeof note.name === "string")? note.created : new Date(),
             category: event.target.categories.value,
             content: event.target.content.value,
             dates: getDatesFromText(event.target.content.value),
-            archived: (note)? note.archived : false
+            archived: (typeof note.name === "string")? note.archived : false
         }
 
         if (typeof note.name === "string")
@@ -55,29 +88,10 @@ function buildForm(note){
     wrapperDiv.className = 'wrapper-div';
     wrapperDiv.append(form);
 
-    document.body.append(wrapperDiv);
-}
-
-//Note function
-function createNote(note){
-    notes.push(note);
-    refreshTables();
-}
-function updateNote(note){
-    notes.splice(notes.findIndex(n => n.id === note.id),1, note);
-    refreshTables();
-}
-function deleteNote(noteID){
-    notes.splice(notes.indexOf(notes.find(note => note.id === noteID)),1);
-    document.getElementById(noteID).remove();
-    clearInnerHTML(statisticsTable);
-    buildStatisticTable();
-}
-function changeArchiveState(note){
-    notes[notes.findIndex(n => n.id === note.id)].archived = !notes[notes.findIndex(n => n.id === note.id)].archived;
-    refreshTables()
+    document.body.prepend(wrapperDiv);
 }
 
+//table functions
 function refreshTables(){
     clearAllTables();
     buildNotesTable();
@@ -133,15 +147,12 @@ function buildStatTr(category, active, total){
         </tr>
     `;
 }
-
 function buildNotesTable(){
     notes.forEach(note => {
         if (!note.archived === activeNoteTableShown)
             notesTable.append( buildNotesTr(note) );
     })
-
 }
-
 function buildNotesTr(note){
     let tr = document.createElement('tr');
     tr.id = note.id;
@@ -163,7 +174,7 @@ function buildNotesTr(note){
 
     tdArchive.className = "row-icon archive";
     tdArchive.addEventListener("click", ()=>{ changeArchiveState(note) });
-    tdArchive.innerHTML = (activeNoteTableShown)? icons.UNARCHIVE_ICON : icons.ARCHIVE_ICON;
+    tdArchive.innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON ;
 
     tdDelete.className = "row-icon delete";
     tdDelete.addEventListener("click", ()=>{ deleteNote(note.id) });
@@ -173,19 +184,21 @@ function buildNotesTr(note){
     return tr;
 }
 
-export {
-    refreshTables,
-    loadIconsIntoHeader,
-    notes
-}
 
 function switchTables() {
     activeNoteTableShown = !activeNoteTableShown;
     clearInnerHTML(notesTable);
     buildNotesTable();
+    document.getElementById('table-name').innerText = activeNoteTableShown? "Active notes" : "Archived notes";
     document.getElementsByClassName('header-icon archive')[0].innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON;
 }
 
+export {
+    refreshTables,
+    loadIconsIntoHeader,
+    notes
+}
+
 document.getElementById("table-switcher").addEventListener("click", switchTables);
 document.getElementById("create-note-button").addEventListener("click", buildForm);
-// document.getElementById("build-stats").addEventListener("click", refreshTables);
+

styles/form-styles.css

@@ -5,17 +5,20 @@
 }
 #create-note *{
     margin-left: 2em;
-}
-#create-note button{
     padding: 1em;
-    border-radius: 0.5em;
     background-color: #b6d7d7;
+    border-radius: 0.5em;
+}
+#create-note div{
+    opacity:  0;
+    transition: opacity 1s;
+}
+#create-note button{
     border: 1px solid cadetblue;
 }
 .wrapper-div{
-    position: absolute;
+    position: fixed;
     top: 0;
-    left: 0;
     height: 100vh;
     width: 100vw;
     display: flex;
@@ -42,8 +45,17 @@ form{
 form > *:not(:last-child){
     margin-bottom: 0.5em;
 }
-input, select{
+input, select, textarea{
     width: 100%;
+    max-width: 100%;
     padding: 10px;
-
+}
+textarea{
+    min-width: 100%;
+    min-height: 4em;
+    max-height: 12em;
+}
+.invalid-input{
+    border-color: crimson;
+    background-color: rgba(220,20,60,0.5);
 }

styles/general.css

@@ -1,6 +1,7 @@
 @import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
 
 *{
+    color: #424242;
     font-family: 'Roboto', sans-serif;
     margin: 0;
     padding: 0;
@@ -10,6 +11,8 @@ header, main{
 }
 header{
     text-align: center;
-    color: ghostwhite;
     background-color: darkcyan;
 }
+h1{
+    color: ghostwhite!important;
+}