-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
107 lines (92 loc) · 3.79 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🧮</text></svg>" />
<link rel="stylesheet" href="./src/styles/index.scss">
<title>cgpa calculator</title>
<script src="./src/main.ts" type="module"></script>
</head>
<body>
<main class="main" data-main>
<section class="main__header">
<h2>cgpa calculator</h2>
</section>
<section class="main__content" data-main-content></section>
<section class="main__footer">
<button class="btn btn--cta" type="button" data-btn-semester>
<span class="btn__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8m-4-4v8m9-4a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</span>
<span>add semester</span>
</button>
<button class="btn btn--clear" type="button" data-btn-clear>
<span class="btn__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8m-4-4v8m9-4a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</span>
<span>clear all</span>
</button>
</section>
</main>
<section class="modal" data-modal>
<div class="wrap wrap--form" data-modal-wrap>
<form data-grade-form>
<div class="form-group">
<h3>add grades</h3>
<button class="btn btn--close" type="button" title="close form" data-btn-close>
<span class="btn__icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8m-4-4v8m9-4a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
</span>
</button>
</div>
<div class="form-group">
<h4 class="form-group__title">part</h4>
<div class="wrap wrap--select">
<select data-part>
<option value="I">1</option>
<option value="II">2</option>
<option value="III">3</option>
<option value="IV">4</option>
<option value="V">5</option>
<option value="VI">6</option>
<option value="VII">7</option>
</select>
</div>
</div>
<div class="form-group">
<h4 class="form-group__title">semester</h4>
<div class="wrap wrap--select">
<select data-semester>
<option value="first">first</option>
<option value="second">second</option>
</select>
</div>
</div>
<div class="wrap wrap--courses" data-course-list>
<div class="grade">
</div>
</div>
<div class="wrap wrap--btn">
<div class="form-group form-group--one">
<button class="btn" type="button" data-btn-grade>add grade</button>
</div>
<div class="form-group form-group--two">
<button class="btn btn--calc" type="submit" data-btn-calculate>calculate</button>
</div>
</div>
</form>
</div>
</section>
<section class="modal" data-confirm>
<div class="wrap wrap--confirm">
</div>
</section>
</body>
</html>