Skip to content

Commit 62bd848

Browse files
6mahdapihka96mahdapihka9
committed
created main structure of document
icons added as code in js file added main styles for tables and general elements
1 parent a61e326 commit 62bd848

File tree

10 files changed

+201
-13
lines changed

10 files changed

+201
-13
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 & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,50 @@
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="col category-icon">&nbsp;</th>
20+
<th class="col name">Name</th>
21+
<th class="col created">Created</th>
22+
<th class="col category1">Category</th>
23+
<th class="col content">Content</th>
24+
<th class="col dates">Dates</th>
25+
<th class="col header-icon">&nbsp;</th>
26+
<th class="col header-icon archive" onclick="switchTables()"></th>
27+
<th class="col header-icon delete"></th>
28+
</tr>
29+
</thead>
30+
<tbody id="active-archive-table"></tbody>
1531
</table>
16-
<div>
1732

33+
<div id="create-note">
34+
<button>Create Note</button>
1835
</div>
19-
<table id="stats-table">
2036

37+
<table>
38+
<thead>
39+
<tr>
40+
<th class="category-icon">&nbsp;</th>
41+
<th class="category2">Note Category</th>
42+
<th class="active">Active</th>
43+
<th class="archived">Archived</th>
44+
</tr>
45+
</thead>
46+
<tbody id="stats-table"></tbody>
2147
</table>
2248
</main>
49+
50+
<script src="scripts/svgs.js"></script>
2351
<script src="scripts/data.js"></script>
2452
<script src="scripts/HTMLBuilder.js"></script>
2553
<script src="scripts/functions.js"></script>

‎scripts/HTMLBuilder.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
function buildForm(){
22

33
}
4+
function buildTable(){
5+
6+
}
7+
function refreshTable(){
8+
9+
}

‎scripts/data.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
let notes = [
22
{
3-
name: ,
4-
created: ,
5-
category: ,
6-
content: ,
7-
dates: ,
8-
archived:
3+
name: "",
4+
created: "",
5+
category: "",
6+
content: "",
7+
dates: "",
8+
archived: false
99
},
1010
]

‎scripts/form.js‎

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

‎scripts/svgs.js‎

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

‎styles/form-styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#create-note{
2+
margin: 2em 0;
3+
display: flex;
4+
justify-content: end;
5+
}
6+
#create-note button{
7+
padding: 1em;
8+
border-radius: 0.5em;
9+
background-color: #b6d7d7;
10+
border: 1px solid cadetblue;
11+
}

‎styles/general.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
padding: 0;
77
}
88
header, main{
9-
padding: 15px 60px;
9+
padding: 1em 4em;
1010
}
1111
header{
1212
text-align: center;

‎styles/main.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎styles/table-styles.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
table{
2+
display: block;
3+
width: 100%;
4+
border-spacing: 0 0.5em;
5+
max-height: 50vmax;
6+
overflow-y: auto;
7+
scroll-behavior: smooth;
8+
}
9+
tr th{
10+
color: ghostwhite;
11+
background-color: cadetblue;
12+
}
13+
tr td{
14+
background-color: #b6d7d7;
15+
}
16+
th, td{
17+
padding: 1em;
18+
text-align: left;
19+
overflow:hidden;
20+
white-space:nowrap;
21+
text-overflow: ellipsis;
22+
}
23+
tr td:first-child, tr th:first-child{
24+
border-top-left-radius: 0.5em;
25+
border-bottom-left-radius: 0.5em;
26+
}
27+
28+
tr td:last-child, tr th:last-child{
29+
border-top-right-radius: 0.5em;
30+
border-bottom-right-radius: 0.5em;
31+
}
32+
.category-icon{
33+
width: 5%;
34+
min-width: 1em;
35+
max-width: 2em;
36+
}
37+
.name{
38+
width: 20%;
39+
/*min-width: 20%;*/
40+
/*max-width: 20%;*/
41+
}
42+
.created, .category1, .dates{
43+
width: 15%;
44+
}
45+
.header-icon{
46+
width: 4%;
47+
fill: ghostwhite;
48+
}
49+
.header-icon svg {
50+
width: 1.5em;
51+
height: 1.5em;
52+
}
53+
.category-icon svg {
54+
width: 2em;
55+
height: 2em;
56+
}
57+
.category2 {
58+
width: 50%;
59+
}
60+
.active, .archived{
61+
width: 20%;
62+
}
63+
@media screen and (max-width: 800px) {
64+
.created, .dates{
65+
display: none;
66+
}
67+
}

0 commit comments

Comments
 (0)