Skip to content

Commit 4a0f23c

Browse files
6mahdapihka96mahdapihka9
committed
icons names modified into uppercase, because they are consts
categories with task's icons merged into object added function to generate random id created functions for refreshing and generating stats table
1 parent 098289f commit 4a0f23c

File tree

6 files changed

+186
-111
lines changed

6 files changed

+186
-111
lines changed

‎index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,10 +30,10 @@ <h1>Hometask #1 | JavaScript</h1>
3030
<tbody id="active-archive-table"></tbody>
3131
</table>
3232

33-
<script type="module" src="mainThread.js" defer></script>
33+
3434
<div id="create-note">
35-
<button onclick="buildForm()">Build form</button>
36-
<button onclick="loadLocalData()">Load local data</button>
35+
<button id="build-stats">build-stats</button>
36+
<button >Load local data</button>
3737
<button id="create-note-button">Create Note</button>
3838
</div>
3939

@@ -49,6 +49,6 @@ <h1>Hometask #1 | JavaScript</h1>
4949
<tbody id="stats-table"></tbody>
5050
</table>
5151
</main>
52-
52+
<script type="module" src="mainThread.js" defer></script>
5353
</body>
5454
</html>

‎mainThread.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
import { archiveIcon, unarchiveIcon, editIcon, deleteIcon, ideaIcon, quoteIcon, taskIcon, thoughtIcon } from './scripts/svgs.js';
2-
// import * from './scripts/svgs.js';
3-
import { loadDataIntoTables,
1+
import {
42
loadIconsIntoHeader,
5-
switchTables,
6-
refreshTables,
7-
openForm,
8-
loadLocalData} from './scripts/functions.js';
9-
import { buildForm } from './scripts/HTMLBuilder.js';
3+
notes
4+
} from './scripts/HTMLBuilder.js';
105

11-
loadIconsIntoHeader( archiveIcon, deleteIcon );
6+
loadIconsIntoHeader( );
127

13-
loadDataIntoTables();

‎scripts/HTMLBuilder.js‎

Lines changed: 98 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,117 @@
1-
import { categories } from "./data.js";
1+
import { notes, categories, icons } from './data.js';
2+
// import { makeID } from "./functions";
23

3-
document.getElementById("create-note-button").addEventListener("click", buildForm);
4+
let statisticsTable = document.getElementById('stats-table'),
5+
notesTable = document.getElementById('active-archive-table');
6+
7+
8+
function loadIconsIntoHeader(){
9+
Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
10+
if (col.classList.contains('archive'))
11+
col.innerHTML = icons.ARCHIVE_ICON;
12+
if (col.classList.contains('delete'))
13+
col.innerHTML = icons.DELETE_ICON;
14+
// Array.from(col.getElementsByTagName('path')).forEach( path => path.classList.add('header-icon'));
15+
});
16+
}
417

518
function buildForm(name, created, category, content){
619
let form = document.createElement('form');
720

821
form.innerHTML = `
9-
<input type="text" name="name" value="${typeof name === "string"? name : ""}" placeholder="Name">
22+
<input type="text" name="name" value="${typeof name === "string"? name : ''}" placeholder="Name">
1023
<input type="date" name="date" value="${created}">
1124
<select name="categories">
1225
` + categories.map(c => `<option value="${c}">${c}</option>`) + `
1326
</select>
14-
<input type="text" name="content" value="${content? content : ""}" placeholder="Content">
15-
<button type="submit">Submit</button>
27+
<input type="text" name="content" value="${content? content : ''}" placeholder="Content">
28+
<button type="submit" >Submit</button>
1629
`;
1730

1831
document.body.append(form);
1932
}
2033

21-
function buildTable(){
34+
//Note function
35+
function createNote(note){
36+
notes.push(note);
37+
refreshTables();
38+
}
39+
function updateNote(note){
40+
notes.push(note);
41+
refreshTables();
42+
}
43+
function deleteNote(noteID){
44+
notes = notes.filter(note => note.id !== noteID);
45+
document.getElementById(noteID).remove();
46+
}
47+
2248

49+
function refreshTables(){
50+
clearAllTables();
51+
buildStatisticTable();
52+
// buildNotesTable();
53+
}
54+
function clearAllTables(){
55+
// clearInnerHTML(notesTable);
56+
clearInnerHTML(statisticsTable);
2357
}
24-
function refreshTable(){
58+
function clearInnerHTML(parent){
59+
while (parent.firstChild)
60+
parent.removeChild(parent.firstChild);
61+
}
62+
function buildStatisticTable(){
63+
let Ideas, Quotes, Tasks, Thoughts, IdeasActive, QuotesActive, TasksActive, ThoughtsActive;
64+
Ideas = Quotes = Tasks = Thoughts = IdeasActive = QuotesActive = TasksActive = ThoughtsActive = 0;
65+
66+
notes.forEach(note => {
67+
if (note.category === 'Idea'){
68+
Ideas++;
69+
if (!note.archived)
70+
IdeasActive++;
71+
}
72+
if (note.category === 'Quote') {
73+
Quotes++;
74+
if (!note.archived)
75+
QuotesActive++;
76+
}
77+
if (note.category === 'Task') {
78+
Tasks++;
79+
if (!note.archived)
80+
TasksActive++;
81+
}
82+
if (note.category === 'Random Thought') {
83+
Thoughts++;
84+
if (!note.archived)
85+
ThoughtsActive++;
86+
}
87+
});
2588

89+
statisticsTable.innerHTML += (Ideas)? buildStatTr('Idea', IdeasActive, Ideas) : ``;
90+
statisticsTable.innerHTML += (Quotes)? buildStatTr('Quote', QuotesActive, Quotes) : ``;
91+
statisticsTable.innerHTML += (Tasks)? buildStatTr('Task', TasksActive, Tasks) : ``;
92+
statisticsTable.innerHTML += (Thoughts)? buildStatTr('Random Thought', ThoughtsActive, Thoughts) : ``;
2693
}
27-
export { buildForm, buildTable }
94+
function buildStatTr(category, active, total){
95+
return `
96+
<tr>
97+
<td className="category-icon">${ categories[category] }</td>
98+
<td className="category2">${ category }</td>
99+
<td className="active">${ active }</td>
100+
<td className="archived">${ total-active }</td>
101+
</tr>
102+
`;
103+
}
104+
105+
function buildNotesTable(){
106+
107+
}
108+
109+
export {
110+
refreshTables,
111+
loadIconsIntoHeader,
112+
notes
113+
}
114+
115+
116+
document.getElementById("create-note-button").addEventListener("click", buildForm);
117+
document.getElementById("build-stats").addEventListener("click", refreshTables);

‎scripts/data.js‎

Lines changed: 65 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,91 @@
1-
export let categories = ["Task", "Random Thought", "Idea", "Quote"]
1+
import * as ICONS from './svgs.js';
2+
3+
export let icons = ICONS
4+
5+
export let categories = {
6+
"Idea" : icons.IDEA_ICON,
7+
"Quote": icons.QUOTE_ICON,
8+
"Task": icons.TASK_ICON,
9+
"Random Thought": icons.THOUGHT_ICON
10+
}
211

312
export let notes = [
413
{
5-
name: "",
6-
created: "",
7-
category: "",
8-
content: "",
14+
id: "ZDZ_XnG0Ut",
15+
name: "Shopping list",
16+
created: new Date(),
17+
category: "Task",
18+
content: "Tomatoes, bread",
919
dates: "",
1020
archived: false
1121
},
1222
{
13-
name: "",
14-
created: "",
15-
category: "",
16-
content: "",
23+
id: "WOkLYrlHDT",
24+
name: "The theory of evolution",
25+
created: new Date(),
26+
category: "Random Thought",
27+
content: "The evolution is ..........",
1728
dates: "",
1829
archived: false
1930
},
2031
{
21-
name: "",
22-
created: "",
23-
category: "",
24-
content: "",
32+
id: "ZMk3ZwiRHz",
33+
name: "New Feature",
34+
created: new Date(),
35+
category: "Idea",
36+
content: "Implement some feature in this app",
2537
dates: "",
2638
archived: false
2739
},
2840
{
29-
name: "",
30-
created: "",
31-
category: "",
32-
content: "",
33-
dates: "",
41+
id: "sizDU41a7_",
42+
name: "Dentist",
43+
created: new Date(),
44+
category: "Task",
45+
content: "I’m gonna have a dentist appointment on the 3/5/2021, I moved it from 5/5/2021",
46+
dates: "3/5/2021, 5/5/2021",
3447
archived: false
3548
},
3649
{
37-
name: "",
38-
created: "",
39-
category: "",
40-
content: "",
41-
dates: "",
42-
archived: true
43-
},
44-
{
45-
name: "",
46-
created: "",
47-
category: "",
48-
content: "",
49-
dates: "",
50-
archived: true
51-
},
52-
{
53-
name: "",
54-
created: "",
55-
category: "",
56-
content: "",
57-
dates: "",
58-
archived: true
59-
},
60-
{
61-
name: "",
62-
created: "",
63-
category: "",
64-
content: "",
50+
id: "fpOx4iIX0U",
51+
name: "William Gaddis",
52+
created: new Date(),
53+
category: "Quote",
54+
content: "Power doesn't come with bla bla bla",
6555
dates: "",
6656
archived: false
6757
},
6858
{
69-
name: "",
70-
created: "",
71-
category: "",
72-
content: "",
59+
id: "LI_RUnkMNo",
60+
name: "Book",
61+
created: new Date(),
62+
category: "Task",
63+
content: "The Lean Statrup",
7364
dates: "",
7465
archived: false
7566
},
67+
// {
68+
// name: "",
69+
// created: "",
70+
// category: "",
71+
// content: "",
72+
// dates: "",
73+
// archived: true
74+
// },
75+
// {
76+
// name: "",
77+
// created: "",
78+
// category: "",
79+
// content: "",
80+
// dates: "",
81+
// archived: false
82+
// },
83+
// {
84+
// name: "",
85+
// created: "",
86+
// category: "",
87+
// content: "",
88+
// dates: "",
89+
// archived: false
90+
// },
7691
]

‎scripts/functions.js‎

Lines changed: 6 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,9 @@
1-
function loadDataIntoTables(){
1+
export function makeID (length) {
2+
let result = '',
3+
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
24

3-
}
4-
function switchTables(){
5-
6-
}
7-
function loadLocalData(){
8-
9-
}
10-
function openForm(){
11-
12-
}
13-
function refreshTables(){
14-
15-
}
16-
function loadIconsIntoHeader(archiveIcon, deleteIcon){
17-
Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
18-
if (col.classList.contains('archive'))
19-
col.innerHTML = archiveIcon;
20-
if (col.classList.contains('delete'))
21-
col.innerHTML = deleteIcon;
22-
// Array.from(col.getElementsByTagName('path')).forEach( path => path.classList.add('header-icon'));
23-
});
24-
}
5+
for (let i = 0; i < length; i++)
6+
result += chars.charAt(Math.floor(Math.random() * chars.length));
257

26-
export {
27-
loadDataIntoTables,
28-
loadIconsIntoHeader,
29-
switchTables,
30-
refreshTables,
31-
openForm,
32-
loadLocalData
8+
return result;
339
}

0 commit comments

Comments
 (0)