-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (155 loc) · 5.39 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!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" />
<title>Guess The Random Number</title>
<link rel="stylesheet" href="./fontawesome-pro-master/css/all.min.css" />
<link href="./bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
</head>
<body id="bodyColor" onload="startGame()">
<!-- modal pop-up for game-lost -->
<div class="modal fade" id="myModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-dark border-danger">
<div class="modal-header py-4">
<h5 class="modal-title text-center w-100 text-danger display-3" id="ModalLabel">
<i class="fa-solid fa-brake-warning"></i>
</h5>
</div>
<div class="modal-body text-center d-flex flex-column align-items-center justify-content-center"
style="line-height: 30px">
<h5 class="text-white">
<i class="fa-solid fa-wagon-covered display-6"></i>
You lost the game...!
</h5>
<h5 class="text-white">
<i class="fa-solid fa-hand-fingers-crossed display-6"></i>
Good Luck!
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="closebutton" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- modal pop-up for game-win -->
<div class="modal fade" id="myModalTwo" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content bg-dark border-danger">
<div class="modal-header py-4">
<h5 class="modal-title text-center w-100 text-danger display-3">
<i class="fa-solid fa-trophy-star"></i>
</h5>
</div>
<div class="modal-body text-center d-flex flex-column align-items-center justify-content-center"
style="line-height: 30px">
<h5 class="text-white">
<i class="fa-regular fa-award display-6"></i>
You won the game...!
</h5>
<h5 class="text-white">
<i class="fa-regular fa-face-awesome display-6"></i>
Wow!
</h5>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" id="closeBtn" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<section class="container-fluid d-flex align-items-center justify-content-center">
<div class="container" style="max-width: fit-content">
<div class="row gy-5 mb-5">
<div class="col-md-12">
<div class="wrapper d-flex align-items-center justify-content-between">
<div class="resetBtn">
<input type="reset" value="Again!"
class="btn btn-primary btn-lg p-3 btn-outline-success border-0" id="resetBtn" />
</div>
<div class="rangeText">
<h6><Between 1 and 20></h6>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-md-12">
<header class="header text-center mb-5">
<h1>
<i class="fa-light fa-face-thinking fa-shake display-3"></i>
<span class="txt-type" data-wait="3000"
data-words='["Guess My Number!", "The Game Will Prove You-Know-What ", "Show Me If You Can Hit 5 Streak!"]'></span>
</h1>
</header>
</div>
<div class="col-md-12 position-relative">
<div class="col-md-3 col-sm-4 col-lg-2 col-xxl-2 col-5 relative-width mx-auto">
<div class="displayNumber text-center py-3">
<h1 id="displayNumberBox" style="font-size: 60px">
?
</h1>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col-md-6">
<div class="inputNumberBox mx-auto">
<form id="gameForm" action="#">
<input type="number" name="number" class="form-control text-center py-2" placeholder="Enter"
id="numberBox" />
<br />
<input type="button" value="Check!"
class="btn btn-success btn-lg mt-1 btn-outline-primary p-3 w-100 border-0"
id="checkBtn" />
</form>
</div>
</div>
<div class="col-md-6">
<div class="gameInfo">
<div class="gameTitle">
<header class="gameInfoTitle">
<h5 id="numberMeasurement">
<i class="fa-light fa-thought-bubble" style="font-size: 2rem"></i>
Start Guessing...<span class="animation fa-fade">!</span>
</h5>
</header>
</div>
<div class="gameInfoDesc">
<h5 class="lh-lg">
<i class="fa-regular fa-hundred-points fa-fade text-success" id="hundredPoints"
style="font-size: 2rem"></i>
Score: <span id="gameLife">20</span>
</h5>
<span class="scoreCount"></span>
<h5 class="lh-lg">
<i class="fa-solid fa-medal fa-fade text-primary" id="medal"
style="font-size: 2rem"></i>
Winning Streak:
<span id="winStreak">0</span>
</h5>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
</section>
<script src="./jquery-3.6.0.min.js"></script>
<script src="./fontawesome-pro-master/js/all.min.js"></script>
<script src="./typewriter.js"></script>
<script src="./bootstrap.bundle.min.js"></script>
<script src="./app.js"></script>
</body>
</html>