added function to create form for adding/editing notes

fixed bug with imports (extensions of js files were missing)

Author: 6mahdapihka9

index.html

@@ -16,22 +16,25 @@ <h1>Hometask #1 | JavaScript</h1>
         <table>
             <thead>
                 <tr>
-                    <th class="col category-icon">&nbsp;</th>
-                    <th class="col name">Name</th>
-                    <th class="col created">Created</th>
-                    <th class="col category1">Category</th>
-                    <th class="col content">Content</th>
-                    <th class="col dates">Dates</th>
-                    <th class="col header-icon">&nbsp;</th>
-                    <th class="col header-icon archive" onclick="switchTables()"></th>
-                    <th class="col header-icon delete"></th>
+                    <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 class="header-icon">&nbsp;</th>
+                    <th class="header-icon archive" onclick="switchTables()"></th>
+                    <th class="header-icon delete"></th>
                 </tr>
             </thead>
             <tbody id="active-archive-table"></tbody>
         </table>
 
+        <script  type="module" src="mainThread.js" defer></script>
         <div id="create-note">
-            <button>Create Note</button>
+            <button onclick="buildForm()">Build form</button>
+            <button onclick="loadLocalData()">Load local data</button>
+            <button id="create-note-button">Create Note</button>
         </div>
 
         <table>
@@ -47,11 +50,5 @@ <h1>Hometask #1 | JavaScript</h1>
         </table>
     </main>
 
-    <script  type="module" src="mainThread.js"></script>
-<!--    <script type="module" src="scripts/svgs.js"></script>-->
-<!--    <script src="scripts/data.js"></script>-->
-<!--    <script src="scripts/HTMLBuilder.js"></script>-->
-<!--    <script type="module" src="scripts/functions.js"></script>-->
-<!--    <script src="scripts/form.js"></script>-->
 </body>
 </html>

mainThread.js

@@ -1,8 +1,13 @@
-// import { archiveIcon, unarchiveIcon, editIcon, deleteIcon, ideaIcon, quoteIcon, taskIcon, thoughtIcon } from './svgs';
-import * as icons from './scripts/svgs.js';
-import { loadDataIntoTables, loadIconsIntoHeader } from './scripts/functions.js';
+import { archiveIcon, unarchiveIcon, editIcon, deleteIcon, ideaIcon, quoteIcon, taskIcon, thoughtIcon } from './scripts/svgs.js';
+// import *  from './scripts/svgs.js';
+import { loadDataIntoTables,
+    loadIconsIntoHeader,
+    switchTables,
+    refreshTables,
+    openForm,
+    loadLocalData} from './scripts/functions.js';
+import { buildForm } from './scripts/HTMLBuilder.js';
 
-
-loadIconsIntoHeader( icons.archiveIcon, icons.deleteIcon );
+loadIconsIntoHeader( archiveIcon, deleteIcon );
 
 loadDataIntoTables();

scripts/HTMLBuilder.js

@@ -1,9 +1,27 @@
-function buildForm(){
+import { categories } from "./data.js";
 
+document.getElementById("create-note-button").addEventListener("click", buildForm);
+
+function buildForm(name, created, category, content){
+    let form = document.createElement('form');
+
+    form.innerHTML = `
+        <input type="text" name="name" value="${typeof name === "string"? name : ""}" placeholder="Name">
+        <input type="date" name="date" value="${created}">
+        <select name="categories">
+        ` + categories.map(c => `<option value="${c}">${c}</option>`) + `
+        </select>
+        <input type="text" name="content" value="${content? content : ""}" placeholder="Content">
+        <button type="submit">Submit</button> 
+    `;
+
+    document.body.append(form);
 }
+
 function buildTable(){
 
 }
 function refreshTable(){
 
 }
+export { buildForm, buildTable }

scripts/data.js

@@ -1,4 +1,70 @@
-let notes = [
+export let categories = ["Task", "Random Thought", "Idea", "Quote"]
+
+export let notes = [
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: false
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: false
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: false
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: false
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: true
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: true
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: true
+    },
+    {
+        name: "",
+        created: "",
+        category: "",
+        content: "",
+        dates: "",
+        archived: false
+    },
     {
         name: "",
         created: "",

scripts/form.js

@@ -1 +1 @@
-buildForm();
+

scripts/functions.js

@@ -1,7 +1,18 @@
 function loadDataIntoTables(){
 
 }
+function switchTables(){
 
+}
+function loadLocalData(){
+
+}
+function openForm(){
+
+}
+function refreshTables(){
+
+}
 function loadIconsIntoHeader(archiveIcon, deleteIcon){
     Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
         if (col.classList.contains('archive'))
@@ -14,5 +25,9 @@ function loadIconsIntoHeader(archiveIcon, deleteIcon){
 
 export {
     loadDataIntoTables,
-    loadIconsIntoHeader
+    loadIconsIntoHeader,
+    switchTables,
+    refreshTables,
+    openForm,
+    loadLocalData
 }

styles/form-styles.css

@@ -3,6 +3,9 @@
     display: flex;
     justify-content: end;
 }
+#create-note *{
+    margin-left: 2em;
+}
 #create-note button{
     padding: 1em;
     border-radius: 0.5em;

styles/table-styles.css

@@ -31,8 +31,8 @@ tr td:last-child, tr th:last-child{
 }
 .category-icon{
     width: 5%;
-    min-width: 1em;
-    max-width: 2em;
+    /*min-width: 1.5em;*/
+    min-width: 2em;
 }
 .name{
     width: 20%;
@@ -45,6 +45,8 @@ tr td:last-child, tr th:last-child{
 .header-icon{
     width: 4%;
     fill: ghostwhite;
+    min-width: 1.5em;
+    min-height: 1.5em;
 }
 .header-icon svg {
     width: 1.5em;