added styles for forms and its wrapper

created function with regexp to find dates in text

Author: 6mahdapihka9

index.html

@@ -40,7 +40,7 @@ <h1>Hometask #1 | JavaScript</h1>
         <table>
             <thead>
                 <tr>
-                    <th class="category-icon">&nbsp;</th>
+                    <th class="stats-icon">&nbsp;</th>
                     <th class="category2">Note Category</th>
                     <th class="active">Active</th>
                     <th class="archived">Archived</th>

scripts/HTMLBuilder.js

@@ -1,4 +1,5 @@
 import { notes, categories, icons } from './data.js';
+import { makeID, getDatesFromText } from "./functions.js";
 // import { makeID } from "./functions";
 
 let statisticsTable = document.getElementById('stats-table'),
@@ -20,15 +21,34 @@ function buildForm(name, created, category, content){
 
     form.innerHTML = `
         <input type="text" name="name" value="${typeof name === "string"? name : ''}" placeholder="Name">
-        <input type="date" name="date" value="${created}">
+<!--        <input type="date" name="date" value="${created}">-->
         <select name="categories">
-        ` + categories.map(c => `<option value="${c}">${c}</option>`) + `
+        ` + Object.keys(categories).map(c => `<option value="${c}">${c}</option>`) + `
         </select>
         <input type="text" name="content" value="${content? content : ''}" placeholder="Content">
-        <button type="submit" >Submit</button> 
+        <input type="submit" value="Submit"> 
     `;
 
-    document.body.append(form);
+    form.onsubmit = (event)=>{
+        event.preventDefault();
+
+        createNote({
+            id: makeID(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
+        });
+    };
+
+
+    let wrapperDiv = document.createElement('div');
+    wrapperDiv.className = 'wrapper-div';
+    wrapperDiv.append(form);
+
+    document.body.append(wrapperDiv);
 }
 
 //Note function
@@ -94,7 +114,7 @@ function buildStatisticTable(){
 function buildStatTr(category, active, total){
     return `
         <tr>
-            <td className="category-icon">${ categories[category] }</td>
+            <td className="category-icon stats-icon">${ categories[category] }</td>
             <td className="category2">${ category }</td>
             <td className="active">${ active }</td>
             <td className="archived">${ total-active }</td>

scripts/functions.js

@@ -7,3 +7,10 @@ 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);
+
+    if (results.length)
+        return results;
+    return;
+}

styles/form-styles.css

@@ -12,3 +12,38 @@
     background-color: #b6d7d7;
     border: 1px solid cadetblue;
 }
+.wrapper-div{
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    background-color: rgba(0,0,0,0.5);
+}
+form *{
+    box-sizing: border-box;
+    border: 1px solid rgba(0,0,0,0.1);
+}
+form{
+    width: 20em;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    border-radius: 0.5em;
+    padding: 1em;
+}
+form > *:not(:last-child){
+    margin-bottom: 0.5em;
+}
+input, select{
+    width: 100%;
+    padding: 10px;
+
+}

styles/table-styles.css

@@ -34,6 +34,18 @@ tr td:last-child, tr th:last-child{
     /*min-width: 1.5em;*/
     min-width: 2em;
 }
+.stats-icon td {
+    width: 4%;
+    /*fill: ghostwhite;*/
+    min-width: 1.5em;
+    min-height: 1.5em;
+    max-width: 3em;
+}
+.stats-icon svg{
+    width: 2em;
+    height: 2em;
+    min-width: 3em;
+}
 .name{
     width: 20%;
     /*min-width: 20%;*/
@@ -62,6 +74,12 @@ tr td:last-child, tr th:last-child{
 .active, .archived{
     width: 20%;
 }
+.category-icon, svg{
+    width: 2em;
+    height: 2em;
+    max-width: 2em;
+    max-height: 2em;
+}
 @media screen and (max-width: 800px) {
     .created, .dates{
         display: none;