-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhelp.html
438 lines (435 loc) · 29.5 KB
/
help.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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help</title>
<link rel="stylesheet" href="styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/help.css">
<script src="styles/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<header></header>
<main>
<div class="container mt-3">
<div class="row mb-3" id="first-row">
<div id="carouselExampleDark"
class="col-xxl-8 col-xl-8 col-lg-8 col-md-7 col-sm-12 carousel carousel-dark slide"
data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="4"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="5"
aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="6"
aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="7"
aria-label="Slide 8"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="8"
aria-label="Slide 9"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="9"
aria-label="Slide 10"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="10"
aria-label="Slide 11"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="11"
aria-label="Slide 12"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="12"
aria-label="Slide 13"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="13"
aria-label="Slide 14"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="14"
aria-label="Slide 15"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="15"
aria-label="Slide 16"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="16"
aria-label="Slide 17"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="17"
aria-label="Slide 18"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="18"
aria-label="Slide 19"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="19"
aria-label="Slide 20"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="20"
aria-label="Slide 21"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="21"
aria-label="Slide 22"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="22"
aria-label="Slide 23"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="23"
aria-label="Slide 24"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="24"
aria-label="Slide 25"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="25"
aria-label="Slide 26"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="26"
aria-label="Slide 27"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="27"
aria-label="Slide 28"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="2000">
<img src="images/index (1).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>1</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/index (2).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>2</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/index (3).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>3</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/home (1).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>4</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/home (2).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>5</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/home (3).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>6</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/home (4).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>7</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/home (5).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>8</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/home (6).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>9</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/home (7).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>10</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/home (8).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>11</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/sign-up (1).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>12</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/sign-up (2).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>13</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/sign-up (3).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>14</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/sign-up (4).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>15</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/sign-in (1).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>16</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/sign-in (2).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>17</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/university (1).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>18</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/university (2).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>19</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/university (3).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>20</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/university (4).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>21</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/university (5).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>22</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/university (6).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>23</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/university (7).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>24</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/school (1).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>25</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/school (2).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>26</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/school (3).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>27</h5>
</div>
</div>
<div class="carousel-item" data-bs-interval="3000">
<img src="images/school (4).png" class="d-block w-100" alt="photo">
<div class="carousel-caption d-none d-md-block">
<h5>28</h5>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="col-xxl-4 col-xl-4 col-lg-4 col-md-5 col-sm-12">
<ul class="list-group">
<li class="list-group-item bg-dark list-head">
<div class="profile-holder">
<a href="https://github.com/sinavahabi" class="header d-inline-block mt-2"
title="github.com/sinavahabi">Github projects</a>
<img src="styles/images/profile.JPEG" alt="profile photo" id="profile"
class="d-inline-block float-end" title="github.com/sinavahabi">
</div>
</li>
<li class="list-group-item" aria-current="true" title="calculator-mini-project">
<a href="https://github.com/sinavahabi/calculator-mini-project"
class="text-muted">Calculator
Web Application</a>
<span class="badge rounded-pill bg-warning javascript">JavaScript</span>
</li>
<li class="list-group-item" title="staff-info-mini-project">
<a href="https://github.com/sinavahabi/staff-info-mini-project" class="text-muted">Staff
Information Management</a>
<span class="badge rounded-pill bg-warning javascript">JavaScript</span>
</li>
<li class="list-group-item active" title="average-mini-project">
<a href="https://github.com/sinavahabi/average-mini-project" class="active">
Average Mark Calculation Website</a>
<span class="badge rounded-pill bg-warning javascript">JavaScript</span>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info"
title="index.html">
<a href="index.html" class="text-light" target="_blank">Current Project</a>
</span>
</li>
<li class="list-group-item" title="AverageMiniProject">
<a href="https://github.com/sinavahabi/AverageMiniProject" class="text-muted">Average Mark
Calculation</a>
<span class="badge rounded-pill python">Python</span>
</li>
<li class="list-group-item" title="CalculatorMiniProject">
<a href="https://github.com/sinavahabi/CalculatorMiniProject" class="text-muted">Calculator
Application</a>
<span class="badge rounded-pill python">Python</span>
</li>
<li class="list-group-item" title="RPGMiniProject">
<a href="https://github.com/sinavahabi/RPGMiniProject" class="text-muted">Role Playing
Game</a>
<span class="badge rounded-pill python">Python</span>
</li>
<li class="list-group-item" title="MarketsMiniProject">
<a href="https://github.com/sinavahabi/MarketsMiniProject" class="text-muted">Market
Status</a>
<span class="badge rounded-pill python">Python</span>
</li>
<li class="list-group-item" title="AdvanceMarketsMiniProject">
<a href="https://github.com/sinavahabi/AdvanceMarketsMiniProject" class="text-muted">Advance
Market Status</a>
<span class="badge rounded-pill python">Python</span>
</li>
<li class="list-group-item" title="MachineVisionMiniProject">
<a href="https://github.com/sinavahabi/MachineVisionMiniProject" class="text-muted">Image
Classification</a>
<span class="badge rounded-pill python">Python</span>
</li>
</ul>
</div>
</div>
<div class="row mb-2" id="second-row">
<div class="paragraph p-3">
<header>
<h1 class="text-center text-danger p-2 bg-dark" id="text-header">
Average Mark Calculation Website
</h1>
<hr>
</header>
<main>
<article>
<h2 class="mb-3" id="head2">
<span class="text-info">Languages:</span><span
class="text-light bg-warning m-1 p-1 JS">JavaScript</span><span
class="text-light bg-danger m-1 p-1 HTML">HTML5</span><span
class="text-light m-1 p-1 CSS">CSS3</span>
</h2>
<h3 class="mb-3" id="head3">
<span class="text-danger">Topics:</span> Vanilla JS/ API/ JSON/ Parallax web page/ Theme
customize/ Customizable/ Error handling/ User interaction/ User management/ Form
validation/ Responsive website/ Responsive design/ Bootstrap5/ Font awesome/ Flexbox/ Git
</h3>
<hr>
<p class="h5 text-muted">
"Note: The main page is "index.html" file for user to begin with."
<br>
At the beginning user will face a parallax web page which will have small UI
modifications by scrolling vertically. When the user reaches the bottom of the web page
there is a "Let's Start" button waiting to be clicked in order to navigate user to the
home page.<br>
Be aware that the only page that doesn't include a responsive design concept is this one
"index.html".<br>
After all mentioned processes worked successfully and a user was navigated to the home
page, they either should be logged in with their information or not.<br>
So in this state, they will face a message that guides them to the login page by
default. all menu options are disabled in this state such as the customization option at
the top right side of the navbar container.<br>
Even if they try to be navigated to the university or school page they will face a
similar message to the home page which asks them to log in for website features and
services.<br>
They are also able to choose either sign-up or sign-in shown at the center of the navbar
menu.<br>
For the first time, they need to sign up first and sign in second. On the sign-up page
user has to fill the form correctly.<br>
The sign-up page includes a strong form validator with designed error messages that will
pop up on the DOM as long as a user is not behaving as expected.<br>
There are error messages and success messages which will be shown on UI according to
different circumstances. Also they have to insert an unique email, otherwise sign up
process will not continue until they insert an valid unique email address.
When everything worked fine they will be redirected to the login page after successful
submit message pops up with a short delay.<br>
On the login page user needs to fill up the form correctly based on registered an unique
email with a strong password.<br>
Like the other designed pages, there will be successful login message or the other error
messages based on different circumstances.<br>
After user data was send to a free JSON server with API, on login page they are used to
validate user info with another boolean object property called loggedIn.<br>
This will help to check whether user a specific user is logged in or not at the moment
to behave and show UI options accordingly.<br>
When they go through a successful login process, they are redirected to the home page
and when they boolean object property called loggedIn was true, they can start using
website features and services.<br>
There is a sidebar at the left side of the web page which includes some tips and
guidance for user to use website services more efficiently. This sidebar job is simple
and translates smoothly on UI. Users can choose whether to use the sidebar button in
order to show or hide the sidebar menu.<br>
There are two result containers for both university and school GPA records. When they
don't have any previous usage of university or school page features and services, a
different message will be shown on the UI with an empty container.<br>
But if they do, All previously calculated GPA records will be shown after they click on
the "Show Activity" button. With a short delay and a "Loading..." message, they should
have their results right away.<br>
Otherwise based on server or internet issues there might be error messages accordingly
on the UI. Because the result of previous records will be an asynchronous process which
will get data from the server with API methods.<br>
Users can customize the page theme and navbar color with the customize option available
on all main pages such as the home page, university and school page as long as the user
is logged in. All asynchronous processes are handled properly with success or unsuccess
messages that will pop up on UI based on different circumstances.<br>
The university and school pages are most likely working with familiar states. Their
feature for user is GPA "Grade Point Average" calculation with a simple form.<br>
Tips are shown on the UI beside the form which handles the calculation part based on
inserted input values by the user. I also need to mention that both university and
school page forms contain a very accurate form validator.<br>
Each lesson form has 3 or 2 inputs based on page content (school forms only contain
lesson titles and marks but university on the other hand also includes unit count input
as well).<br>
After user fills the form correctly and saves all form values, calculation process can
begin. All designed pages contain error handling on each term to avoid probable bugs as
much as possible.<br>
Technologies used in this project were: Pure JavaScript (Vanilla JS), HTML5, Pure CSS3,
Bootstrap5 for the help page, and the other technologies and concepts mentioned at the
top level of the "readme.txt" file.<br>
<br>
Note: All pages follow the responsive design concept except "index.html" which only
works perfectly on desktop devices.<br>
Note: This mini project was completely handled by git.<br>
Note: Codes documentation and descriptions are more obvious in comments among the codes
on each file.
</p>
</article>
</main>
<hr>
<footer class="text-center bg-dark text-primary p-1" id="text-footer">
Author: sina vahabi
</footer>
</div>
</div>
<footer class="text-center text-success bg-light mb-3">
Copyright: 2023/08
</footer>
</div>
</main>
<footer></footer>
</body>
</html>