-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
142 lines (141 loc) · 4.25 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="style/style.css" />
<title>Project Two</title>
</head>
<body>
<header class="header">
<div class="container">
<h1 class="header__tittle">our company's stuff</h1>
</div>
</header>
<section class="wrapper">
<div class="container">
<form action="" id="addEmployeeForm" class="wrapper__form">
<div class="wrapper__inputs">
<div class="wrapper__inputsItem">
<label for="#inputName" class="wrapper__label"
>Enter employee's name:</label
>
<input
type="text"
id="inputName"
class="wrapper__input"
placeholder="Name"
/>
</div>
<div class="wrapper__inputsItem">
<label for="#inputDateOfBirth" class="wrapper__label"
>Enter employee's date of birth:</label
>
<input
type="date"
id="inputDateOfBirth"
class="wrapper__input"
placeholder="Date of birth"
/>
</div>
<div class="wrapper__inputsItem">
<label for="#inputDateOfEmployment" class="wrapper__label"
>Enter date of employment:</label
>
<input
type="date"
id="inputDateOfEmployment"
class="wrapper__input"
placeholder="Employment date"
/>
</div>
<div class="wrapper__inputsItem">
<label for="#inputWage" class="wrapper__label"
>Enter employee's wage in $:</label
>
<input
type="number"
id="inputWage"
class="wrapper__input"
placeholder="Wage"
/>
</div>
</div>
<button id="addEmployeeBtn" class="wrapper__button btnAddEmployee">
add emloyee
</button>
</form>
<div class="wrapper__info">
<div class="wrapper__infoItem">
<p class="wrapper__infoTittle">the number of employees:</p>
<p class="wrapper__infoText" id="numberOfEmployees"></p>
</div>
<div class="wrapper__infoItem">
<p class="wrapper__infoTittle">amount of wages:</p>
<p class="wrapper__infoText" id="amountOfWages"></p>
</div>
</div>
<table id="stuff" class="wrapper__table">
<thead class="wrapper__thead">
<tr class="wrapper__tableTr theadTr">
<th class="wrapper__tableTh"></th>
<th class="wrapper__tableTh">name</th>
<th class="wrapper__tableTh">
<div class="wrapper__thDateOfBirth">
<p class="wrapper__thText">date of birth</p>
<div class="wrapper__thButtons">
<button
class="wrapper__button btnSortUpBirth"
id="btnSortDateOfBirthUp"
></button>
<button
class="wrapper__button btnSortDownBirth"
id="btnSortDateOfBirthDown"
></button>
</div>
</div>
</th>
<th class="wrapper__tableTh">
<div class="wrapper__thDateOfEmployment">
<p class="wrapper__thText">employment date</p>
<div class="wrapper__thButtons">
<button
class="wrapper__button btnSortUpEmploymentDate"
id="btnSortDateOfEmploymentUp"
></button>
<button
class="wrapper__button btnSortDownEmploymentDate"
id="btnSortDateOfEmploymentDown"
></button>
</div>
</div>
</th>
<th class="wrapper__tableTh">wage</th>
</tr>
</thead>
<tfoot id="buttons" class="wrapper__tfoot">
<tr class="wrapper__tableTr tfootTr">
<th colspan="2" class="wrapper__tableTh tfootTh">
<button id="deleteBtn" class="wrapper__button btnFireAnEmployee">
fire employees
</button>
</th>
<th colspan="3" class="wrapper__tableTh tfootTh">
<button id="showWageBtn" class="wrapper__button btnShowAmountOfWages">
show amount of wages
</button>
</th>
</tr>
</tfoot>
<tbody id="allEmployees" class="wrapper__tbody"></tbody>
</table>
</div>
</section>
<script src="js/script.js"></script>
</body>
</html>