Skip to content

Commit 552a8e9

Browse files
6mahdapihka96mahdapihka9
authored
Merge pull request #4 from 6mahdapihka9/develop
final update
2 parents 4d99cee + 66a211e commit 552a8e9

File tree

6 files changed

+152
-116
lines changed

6 files changed

+152
-116
lines changed

‎index.html‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
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">
87
<link rel="stylesheet" href="styles/table-styles.css">
98
<link rel="stylesheet" href="styles/form-styles.css">
109
</head>
@@ -13,15 +12,27 @@
1312
<h1>Hometask #1 | JavaScript</h1>
1413
</header>
1514
<main>
15+
<h3 id="table-name">Active notes</h3>
1616
<table>
17+
<colgroup>
18+
<col class="category-icon">
19+
<col class="name">
20+
<col class="created">
21+
<col class="category1">
22+
<col class="content">
23+
<col class="dates">
24+
<col class="active-icon">
25+
<col class="active-icon">
26+
<col class="active-icon">
27+
</colgroup>
1728
<thead>
1829
<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>
30+
<th>&nbsp;</th>
31+
<th>Name</th>
32+
<th>Created</th>
33+
<th>Category</th>
34+
<th>Content</th>
35+
<th>Dates</th>
2536
<th class="header-icon">&nbsp;</th>
2637
<th class="header-icon archive" id="table-switcher"></th>
2738
<th class="header-icon delete"></th>
@@ -32,16 +43,24 @@ <h1>Hometask #1 | JavaScript</h1>
3243

3344

3445
<div id="create-note">
46+
<div id="announcer"></div>
3547
<button id="create-note-button">Create Note</button>
3648
</div>
3749

3850
<table>
51+
52+
<colgroup>
53+
<col class="category-icon">
54+
<col class="category2">
55+
<col class="active">
56+
<col class="archived">
57+
</colgroup>
3958
<thead>
4059
<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>
60+
<th>&nbsp;</th>
61+
<th>Note Category</th>
62+
<th>Active</th>
63+
<th>Archived</th>
4564
</tr>
4665
</thead>
4766
<tbody id="stats-table"></tbody>

‎scripts/HTMLBuilder.js‎

Lines changed: 78 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,100 @@
11
import { notes, categories, icons } from './data.js';
22
import { makeRandomID, getDatesFromText } from "./functions.js";
33

4-
54
let statisticsTable = document.getElementById('stats-table'),
6-
notesTable = document.getElementById('active-archive-table');
7-
8-
let activeNoteTableShown = true;
9-
5+
notesTable = document.getElementById('active-archive-table'),
6+
activeNoteTableShown = true;
107

8+
//dynamic loading svg icons so they could be styled
119
function loadIconsIntoHeader(){
1210
Array.from(document.getElementsByClassName('header-icon')).forEach(col => {
1311
if (col.classList.contains('archive'))
1412
col.innerHTML = icons.ARCHIVE_ICON;
1513
if (col.classList.contains('delete'))
1614
col.innerHTML = icons.DELETE_ICON;
17-
// Array.from(col.getElementsByTagName('path')).forEach( path => path.classList.add('header-icon'));
1815
});
1916
}
2017

18+
//Note function
19+
function createNote(note){
20+
notes.push(note);
21+
refreshTables();
22+
showAnnouncer('Note created successfully!');
23+
}
24+
function updateNote(note){
25+
try{
26+
let index = notes.findIndex(n => n.id === note.id);
27+
if (index < 0)
28+
throw "There is no such note!";
29+
notes.splice(index,1, note);
30+
refreshTables();
31+
showAnnouncer('Note updated successfully!');
32+
} catch (e){
33+
console.error(e);
34+
showAnnouncer("Note wasn't updated!", true);
35+
}
36+
}
37+
function deleteNote(noteID){
38+
try {
39+
let index = notes.findIndex(n => n.id === noteID);
40+
if (index < 0)
41+
throw "There is no such note!";
42+
notes.splice(index,1);
43+
document.getElementById(noteID).remove();
44+
clearInnerHTML(statisticsTable);
45+
buildStatisticTable();
46+
showAnnouncer('Note deleted successfully!');
47+
} catch (e){
48+
console.error(e);
49+
showAnnouncer("Note wasn't updated!", true);
50+
}
51+
}
52+
function changeArchiveState(note){
53+
notes[notes.findIndex(n => n.id === note.id)].archived = !notes[notes.findIndex(n => n.id === note.id)].archived;
54+
refreshTables()
55+
showAnnouncer(`Note ${(activeNoteTableShown)? 'archived' : 'unarchived'} successfully!`);
56+
}
57+
58+
//announcer for users activity
59+
function showAnnouncer(text, error){
60+
let announcer = document.getElementById('announcer')
61+
announcer.style.opacity = '1';
62+
announcer.innerText = text;
63+
if (error)
64+
announcer.classList.add('invalid-input');
65+
setTimeout(()=>{
66+
announcer.style.opacity = '0';
67+
if (error)
68+
announcer.classList.remove('invalid-input');
69+
}, 1500);
70+
}
71+
2172
function buildForm(note){
2273
let form = document.createElement('form');
2374

2475
form.innerHTML = `
25-
<input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name">
76+
<input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name" required>
2677
<select name="categories">
2778
` + Object.keys(categories).map(c => `<option value="${c}" ${note.category === c? 'selected' : ''}>${c}</option>`) + `
2879
</select>
29-
<input type="text" name="content" value="${note.content? note.content : ''}" placeholder="Content">
30-
<input type="submit" value="Submit">
80+
<textarea name="content" placeholder="Content">${note.content? note.content : ''}</textarea>
81+
<input class="cancel" type="button" value="Cancel">
82+
<input id="submit-button" type="submit" value="Submit" >
3183
`;
84+
form.getElementsByClassName('cancel')[0].addEventListener("click", ()=>{
85+
document.getElementsByClassName('wrapper-div')[0].remove();
86+
});
3287

3388
form.onsubmit = (event)=>{
3489
event.preventDefault();
3590
let newNote = {
36-
id: (note)? note.id : makeRandomID(10),
91+
id: (typeof note.name === "string")? note.id : makeRandomID(10),
3792
name: event.target.name.value,
38-
created: (note)? note.created : new Date(),
93+
created: (typeof note.name === "string")? note.created : new Date(),
3994
category: event.target.categories.value,
4095
content: event.target.content.value,
4196
dates: getDatesFromText(event.target.content.value),
42-
archived: (note)? note.archived : false
97+
archived: (typeof note.name === "string")? note.archived : false
4398
}
4499

45100
if (typeof note.name === "string")
@@ -55,29 +110,10 @@ function buildForm(note){
55110
wrapperDiv.className = 'wrapper-div';
56111
wrapperDiv.append(form);
57112

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()
113+
document.body.prepend(wrapperDiv);
79114
}
80115

116+
//table functions
81117
function refreshTables(){
82118
clearAllTables();
83119
buildNotesTable();
@@ -133,15 +169,12 @@ function buildStatTr(category, active, total){
133169
</tr>
134170
`;
135171
}
136-
137172
function buildNotesTable(){
138173
notes.forEach(note => {
139174
if (!note.archived === activeNoteTableShown)
140175
notesTable.append( buildNotesTr(note) );
141176
})
142-
143177
}
144-
145178
function buildNotesTr(note){
146179
let tr = document.createElement('tr');
147180
tr.id = note.id;
@@ -163,7 +196,7 @@ function buildNotesTr(note){
163196

164197
tdArchive.className = "row-icon archive";
165198
tdArchive.addEventListener("click", ()=>{ changeArchiveState(note) });
166-
tdArchive.innerHTML = (activeNoteTableShown)? icons.UNARCHIVE_ICON : icons.ARCHIVE_ICON;
199+
tdArchive.innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON ;
167200

168201
tdDelete.className = "row-icon delete";
169202
tdDelete.addEventListener("click", ()=>{ deleteNote(note.id) });
@@ -173,19 +206,21 @@ function buildNotesTr(note){
173206
return tr;
174207
}
175208

176-
export {
177-
refreshTables,
178-
loadIconsIntoHeader,
179-
notes
180-
}
181209

182210
function switchTables() {
183211
activeNoteTableShown = !activeNoteTableShown;
184212
clearInnerHTML(notesTable);
185213
buildNotesTable();
214+
document.getElementById('table-name').innerText = activeNoteTableShown? "Active notes" : "Archived notes";
186215
document.getElementsByClassName('header-icon archive')[0].innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON;
187216
}
188217

218+
export {
219+
refreshTables,
220+
loadIconsIntoHeader,
221+
notes
222+
}
223+
189224
document.getElementById("table-switcher").addEventListener("click", switchTables);
190225
document.getElementById("create-note-button").addEventListener("click", buildForm);
191-
// document.getElementById("build-stats").addEventListener("click", refreshTables);
226+

‎styles/form-styles.css‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,20 @@
55
}
66
#create-note *{
77
margin-left: 2em;
8-
}
9-
#create-note button{
108
padding: 1em;
11-
border-radius: 0.5em;
129
background-color: #b6d7d7;
10+
border-radius: 0.5em;
11+
}
12+
#create-note div{
13+
opacity: 0;
14+
transition: opacity 1s;
15+
}
16+
#create-note button{
1317
border: 1px solid cadetblue;
1418
}
1519
.wrapper-div{
16-
position: absolute;
20+
position: fixed;
1721
top: 0;
18-
left: 0;
1922
height: 100vh;
2023
width: 100vw;
2124
display: flex;
@@ -42,8 +45,17 @@ form{
4245
form > *:not(:last-child){
4346
margin-bottom: 0.5em;
4447
}
45-
input, select{
48+
input, select, textarea{
4649
width: 100%;
50+
max-width: 100%;
4751
padding: 10px;
48-
52+
}
53+
textarea{
54+
min-width: 100%;
55+
min-height: 4em;
56+
max-height: 12em;
57+
}
58+
.invalid-input{
59+
border-color: crimson;
60+
background-color: rgba(220,20,60,0.5);
4961
}

‎styles/general.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
22

33
*{
4+
color: #424242;
45
font-family: 'Roboto', sans-serif;
56
margin: 0;
67
padding: 0;
@@ -10,6 +11,8 @@ header, main{
1011
}
1112
header{
1213
text-align: center;
13-
color: ghostwhite;
1414
background-color: darkcyan;
1515
}
16+
h1{
17+
color: ghostwhite!important;
18+
}

‎styles/main.css‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

0 commit comments

Comments
 (0)