Skip to content

Commit 3bb45cf

Browse files
6mahdapihka96mahdapihka9
committed
table styles final update (added colgroup to fix table cells sizes)
commented code erased styles of form wrapper update (made it fixed to screen) textarea instead of input[text] in form text color changed to gray
1 parent ae7b727 commit 3bb45cf

File tree

6 files changed

+130
-116
lines changed

6 files changed

+130
-116
lines changed

‎index.html

+30-11
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

+56-43
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,78 @@
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+
notes.splice(notes.findIndex(n => n.id === note.id),1, note);
26+
refreshTables();
27+
showAnnouncer('Note updated successfully!');
28+
}
29+
function deleteNote(noteID){
30+
notes.splice(notes.indexOf(notes.find(note => note.id === noteID)),1);
31+
document.getElementById(noteID).remove();
32+
clearInnerHTML(statisticsTable);
33+
buildStatisticTable();
34+
showAnnouncer('Note deleted successfully!');
35+
}
36+
function changeArchiveState(note){
37+
notes[notes.findIndex(n => n.id === note.id)].archived = !notes[notes.findIndex(n => n.id === note.id)].archived;
38+
refreshTables()
39+
showAnnouncer(`Note ${(activeNoteTableShown)? 'archived' : 'unarchived'} successfully!`);
40+
}
41+
42+
//announcer for users activity
43+
function showAnnouncer(text){
44+
let announcer = document.getElementById('announcer')
45+
announcer.style.opacity = '1';
46+
announcer.innerText = text;
47+
setTimeout(()=>{ announcer.style.opacity = '0' }, 1500);
48+
}
49+
2150
function buildForm(note){
2251
let form = document.createElement('form');
2352

2453
form.innerHTML = `
25-
<input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name">
54+
<input type="text" name="name" value="${typeof note.name === "string"? note.name : ''}" placeholder="Name" required>
2655
<select name="categories">
2756
` + Object.keys(categories).map(c => `<option value="${c}" ${note.category === c? 'selected' : ''}>${c}</option>`) + `
2857
</select>
29-
<input type="text" name="content" value="${note.content? note.content : ''}" placeholder="Content">
30-
<input type="submit" value="Submit">
58+
<textarea name="content" placeholder="Content">${note.content? note.content : ''}</textarea>
59+
<input class="cancel" type="button" value="Cancel">
60+
<input id="submit-button" type="submit" value="Submit" >
3161
`;
62+
form.getElementsByClassName('cancel')[0].addEventListener("click", ()=>{
63+
document.getElementsByClassName('wrapper-div')[0].remove();
64+
});
3265

3366
form.onsubmit = (event)=>{
3467
event.preventDefault();
3568
let newNote = {
36-
id: (note)? note.id : makeRandomID(10),
69+
id: (typeof note.name === "string")? note.id : makeRandomID(10),
3770
name: event.target.name.value,
38-
created: (note)? note.created : new Date(),
71+
created: (typeof note.name === "string")? note.created : new Date(),
3972
category: event.target.categories.value,
4073
content: event.target.content.value,
4174
dates: getDatesFromText(event.target.content.value),
42-
archived: (note)? note.archived : false
75+
archived: (typeof note.name === "string")? note.archived : false
4376
}
4477

4578
if (typeof note.name === "string")
@@ -55,29 +88,10 @@ function buildForm(note){
5588
wrapperDiv.className = 'wrapper-div';
5689
wrapperDiv.append(form);
5790

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()
91+
document.body.prepend(wrapperDiv);
7992
}
8093

94+
//table functions
8195
function refreshTables(){
8296
clearAllTables();
8397
buildNotesTable();
@@ -133,15 +147,12 @@ function buildStatTr(category, active, total){
133147
</tr>
134148
`;
135149
}
136-
137150
function buildNotesTable(){
138151
notes.forEach(note => {
139152
if (!note.archived === activeNoteTableShown)
140153
notesTable.append( buildNotesTr(note) );
141154
})
142-
143155
}
144-
145156
function buildNotesTr(note){
146157
let tr = document.createElement('tr');
147158
tr.id = note.id;
@@ -163,7 +174,7 @@ function buildNotesTr(note){
163174

164175
tdArchive.className = "row-icon archive";
165176
tdArchive.addEventListener("click", ()=>{ changeArchiveState(note) });
166-
tdArchive.innerHTML = (activeNoteTableShown)? icons.UNARCHIVE_ICON : icons.ARCHIVE_ICON;
177+
tdArchive.innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON ;
167178

168179
tdDelete.className = "row-icon delete";
169180
tdDelete.addEventListener("click", ()=>{ deleteNote(note.id) });
@@ -173,19 +184,21 @@ function buildNotesTr(note){
173184
return tr;
174185
}
175186

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

182188
function switchTables() {
183189
activeNoteTableShown = !activeNoteTableShown;
184190
clearInnerHTML(notesTable);
185191
buildNotesTable();
192+
document.getElementById('table-name').innerText = activeNoteTableShown? "Active notes" : "Archived notes";
186193
document.getElementsByClassName('header-icon archive')[0].innerHTML = (activeNoteTableShown)? icons.ARCHIVE_ICON : icons.UNARCHIVE_ICON;
187194
}
188195

196+
export {
197+
refreshTables,
198+
loadIconsIntoHeader,
199+
notes
200+
}
201+
189202
document.getElementById("table-switcher").addEventListener("click", switchTables);
190203
document.getElementById("create-note-button").addEventListener("click", buildForm);
191-
// document.getElementById("build-stats").addEventListener("click", refreshTables);
204+

‎styles/form-styles.css

+19-7
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

+4-1
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

-1
This file was deleted.

0 commit comments

Comments
 (0)