Skip to content

Commit 4d99cee

Browse files
6mahdapihka96mahdapihka9
authored
Merge pull request #3 from 6mahdapihka9/develop
applying of main functionality of web-note app
2 parents a61e326 + ae7b727 commit 4d99cee

File tree

13 files changed

+675
-19
lines changed

13 files changed

+675
-19
lines changed

‎.idea/vcs.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,49 @@
44
<meta charset="UTF-8">
55
<title>Title</title>
66
<link rel="stylesheet" href="styles/general.css">
7+
<link rel="stylesheet" href="styles/main.css">
8+
<link rel="stylesheet" href="styles/table-styles.css">
9+
<link rel="stylesheet" href="styles/form-styles.css">
710
</head>
811
<body>
912
<header>
10-
<h1>Task 1 | Notes app</h1>
13+
<h1>Hometask #1 | JavaScript</h1>
1114
</header>
1215
<main>
13-
<table id="active-archive-table">
14-
16+
<table>
17+
<thead>
18+
<tr>
19+
<th class="category-icon">&nbsp;</th>
20+
<th class="name">Name</th>
21+
<th class="created">Created</th>
22+
<th class="category1">Category</th>
23+
<th class="content">Content</th>
24+
<th class="dates">Dates</th>
25+
<th class="header-icon">&nbsp;</th>
26+
<th class="header-icon archive" id="table-switcher"></th>
27+
<th class="header-icon delete"></th>
28+
</tr>
29+
</thead>
30+
<tbody id="active-archive-table"></tbody>
1531
</table>
16-
<div>
1732

33+
34+
<div id="create-note">
35+
<button id="create-note-button">Create Note</button>
1836
</div>
19-
<table id="stats-table">
2037

38+
<table>
39+
<thead>
40+
<tr>
41+
<th class="stats-icon">&nbsp;</th>
42+
<th class="category2">Note Category</th>
43+
<th class="active">Active</th>
44+
<th class="archived">Archived</th>
45+
</tr>
46+
</thead>
47+
<tbody id="stats-table"></tbody>
2148
</table>
2249
</main>
23-
<script src="scripts/data.js"></script>
24-
<script src="scripts/HTMLBuilder.js"></script>
25-
<script src="scripts/functions.js"></script>
26-
<script src="scripts/form.js"></script>
50+
<script type="module" src="mainThread.js" defer></script>
2751
</body>
2852
</html>

‎mainThread.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { loadIconsIntoHeader, refreshTables } from './scripts/HTMLBuilder.js';
2+
3+
loadIconsIntoHeader();
4+
refreshTables();

‎scripts/CRUD.js‎

Whitespace-only changes.

‎scripts/HTMLBuilder.js‎

Lines changed: 189 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,191 @@
1-
function buildForm(){
1+
import { notes, categories, icons } from './data.js';
2+
import { makeRandomID, getDatesFromText } from "./functions.js";
23

4+
5+
let statisticsTable = document.getElementById('stats-table'),
6+
notesTable = document.getElementById('active-archive-table');
7+
8+
let activeNoteTableShown = true;
9+
10+
11+
function loadIconsIntoHeader(){
12+
Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
13+
if (col.classList.contains('archive'))
14+
col.innerHTML = icons.ARCHIVE_ICON;
15+
if (col.classList.contains('delete'))
16+
col.innerHTML = icons.DELETE_ICON;
17+
// Array.from(col.getElementsByTagName('path')).forEach( path => path.classList.add('header-icon'));
18+
});
19+
}
20+
21+
function buildForm(note){
22+
let form = document.createElement('form');
23+
24+
form.innerHTML = `
25+
<input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name">
26+
<select name="categories">
27+
` + Object.keys(categories).map(c => `<option value="${c}" ${note.category === c? 'selected' : ''}>${c}</option>`) + `
28+
</select>
29+
<input type="text" name="content" value="${note.content? note.content : ''}" placeholder="Content">
30+
<input type="submit" value="Submit">
31+
`;
32+
33+
form.onsubmit = (event)=>{
34+
event.preventDefault();
35+
let newNote = {
36+
id: (note)? note.id : makeRandomID(10),
37+
name: event.target.name.value,
38+
created: (note)? note.created : new Date(),
39+
category: event.target.categories.value,
40+
content: event.target.content.value,
41+
dates: getDatesFromText(event.target.content.value),
42+
archived: (note)? note.archived : false
43+
}
44+
45+
if (typeof note.name === "string")
46+
updateNote(newNote);
47+
else
48+
createNote(newNote);
49+
50+
document.getElementsByClassName('wrapper-div')[0].remove();
51+
};
52+
53+
54+
let wrapperDiv = document.createElement('div');
55+
wrapperDiv.className = 'wrapper-div';
56+
wrapperDiv.append(form);
57+
58+
document.body.append(wrapperDiv);
59+
}
60+
61+
//Note function
62+
function createNote(note){
63+
notes.push(note);
64+
refreshTables();
65+
}
66+
function updateNote(note){
67+
notes.splice(notes.findIndex(n => n.id === note.id),1, note);
68+
refreshTables();
69+
}
70+
function deleteNote(noteID){
71+
notes.splice(notes.indexOf(notes.find(note => note.id === noteID)),1);
72+
document.getElementById(noteID).remove();
73+
clearInnerHTML(statisticsTable);
74+
buildStatisticTable();
75+
}
76+
function changeArchiveState(note){
77+
notes[notes.findIndex(n => n.id === note.id)].archived = !notes[notes.findIndex(n => n.id === note.id)].archived;
78+
refreshTables()
79+
}
80+
81+
function refreshTables(){
82+
clearAllTables();
83+
buildNotesTable();
84+
buildStatisticTable();
385
}
86+
function clearAllTables(){
87+
clearInnerHTML(notesTable);
88+
clearInnerHTML(statisticsTable);
89+
}
90+
function clearInnerHTML(parent){
91+
while (parent.firstChild)
92+
parent.removeChild(parent.firstChild);
93+
}
94+
function buildStatisticTable(){
95+
let Ideas, Quotes, Tasks, Thoughts, IdeasActive, QuotesActive, TasksActive, ThoughtsActive;
96+
Ideas = Quotes = Tasks = Thoughts = IdeasActive = QuotesActive = TasksActive = ThoughtsActive = 0;
97+
98+
notes.forEach(note => {
99+
if (note.category === 'Idea'){
100+
Ideas++;
101+
if (!note.archived)
102+
IdeasActive++;
103+
}
104+
if (note.category === 'Quote') {
105+
Quotes++;
106+
if (!note.archived)
107+
QuotesActive++;
108+
}
109+
if (note.category === 'Task') {
110+
Tasks++;
111+
if (!note.archived)
112+
TasksActive++;
113+
}
114+
if (note.category === 'Random Thought') {
115+
Thoughts++;
116+
if (!note.archived)
117+
ThoughtsActive++;
118+
}
119+
});
120+
121+
statisticsTable.innerHTML += (Ideas)? buildStatTr('Idea', IdeasActive, Ideas) : ``;
122+
statisticsTable.innerHTML += (Quotes)? buildStatTr('Quote', QuotesActive, Quotes) : ``;
123+
statisticsTable.innerHTML += (Tasks)? buildStatTr('Task', TasksActive, Tasks) : ``;
124+
statisticsTable.innerHTML += (Thoughts)? buildStatTr('Random Thought', ThoughtsActive, Thoughts) : ``;
125+
}
126+
function buildStatTr(category, active, total){
127+
return `
128+
<tr>
129+
<td className="category-icon stats-icon">${ categories[category] }</td>
130+
<td className="category2">${ category }</td>
131+
<td className="active">${ active }</td>
132+
<td className="archived">${ total-active }</td>
133+
</tr>
134+
`;
135+
}
136+
137+
function buildNotesTable(){
138+
notes.forEach(note => {
139+
if (!note.archived === activeNoteTableShown)
140+
notesTable.append( buildNotesTr(note) );
141+
})
142+
143+
}
144+
145+
function buildNotesTr(note){
146+
let tr = document.createElement('tr');
147+
tr.id = note.id;
148+
tr.innerHTML = `
149+
<td className="category-icon">${ categories[note.category] }</td>
150+
<td className="name">${ note.name }</td>
151+
<td className="created">${ note.created.toLocaleDateString() }</td>
152+
<td className="category1">${ note.category }</td>
153+
<td className="content">${ note.content }</td>
154+
<td className="dates">${ note.dates }</td>
155+
`;
156+
let tdEdit = document.createElement('td'),
157+
tdArchive = document.createElement('td'),
158+
tdDelete = document.createElement('td');
159+
160+
tdEdit.className = "row-icon edit";
161+
tdEdit.addEventListener("click", ()=>{ buildForm(note) });
162+
tdEdit.innerHTML = icons.EDIT_ICON;
163+
164+
tdArchive.className = "row-icon archive";
165+
tdArchive.addEventListener("click", ()=>{ changeArchiveState(note) });
166+
tdArchive.innerHTML = (activeNoteTableShown)? icons.UNARCHIVE_ICON : icons.ARCHIVE_ICON;
167+
168+
tdDelete.className = "row-icon delete";
169+
tdDelete.addEventListener("click", ()=>{ deleteNote(note.id) });
170+
tdDelete.innerHTML = icons.DELETE_ICON;
171+
172+
tr.append(tdEdit, tdArchive, tdDelete);
173+
return tr;
174+
}
175+
176+
export {
177+
refreshTables,
178+
loadIconsIntoHeader,
179+
notes
180+
}
181+
182+
function switchTables() {
183+
activeNoteTableShown = !activeNoteTableShown;
184+
clearInnerHTML(notesTable);
185+
buildNotesTable();
186+
document.getElementsByClassName('header-icon archive')[0].innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON;
187+
}
188+
189+
document.getElementById("table-switcher").addEventListener("click", switchTables);
190+
document.getElementById("create-note-button").addEventListener("click", buildForm);
191+
// document.getElementById("build-stats").addEventListener("click", refreshTables);

‎scripts/data.js‎

Lines changed: 88 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,91 @@
1-
let notes = [
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+
}
11+
12+
export let notes = [
213
{
3-
name: ,
4-
created: ,
5-
category: ,
6-
content: ,
7-
dates: ,
8-
archived:
14+
id: "ZDZ_XnG0Ut",
15+
name: "Shopping list",
16+
created: new Date(),
17+
category: "Task",
18+
content: "Tomatoes, bread",
19+
dates: "",
20+
archived: false
921
},
22+
{
23+
id: "WOkLYrlHDT",
24+
name: "The theory of evolution",
25+
created: new Date(),
26+
category: "Random Thought",
27+
content: "The evolution is ..........",
28+
dates: "",
29+
archived: false
30+
},
31+
{
32+
id: "ZMk3ZwiRHz",
33+
name: "New Feature",
34+
created: new Date(),
35+
category: "Idea",
36+
content: "Implement some feature in this app",
37+
dates: "",
38+
archived: false
39+
},
40+
{
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",
47+
archived: false
48+
},
49+
{
50+
id: "fpOx4iIX0U",
51+
name: "William Gaddis",
52+
created: new Date(),
53+
category: "Quote",
54+
content: "Power doesn't come with bla bla bla",
55+
dates: "",
56+
archived: true
57+
},
58+
{
59+
id: "LI_RUnkMNo",
60+
name: "Book",
61+
created: new Date(),
62+
category: "Task",
63+
content: "The Lean Statrup",
64+
dates: "",
65+
archived: true
66+
},
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+
// },
1091
]

‎scripts/form.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
createFrom();
1+

‎scripts/functions.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export function makeRandomID (length) {
2+
let result = '',
3+
chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_';
4+
5+
for (let i = 0; i < length; i++)
6+
result += chars.charAt(Math.floor(Math.random() * chars.length));
7+
8+
return result;
9+
}
10+
11+
export function getDatesFromText(text){
12+
let results = text.match(/[0-9]{1,2}([\-\/ \.])[0-9]{1,2}([\-\/ \.])((19)|(20))[0-9]{2}/g);
13+
14+
if (results && results.length)
15+
return results;
16+
return [];
17+
}

0 commit comments

Comments
 (0)