Skip to content

Commit 2d8eba5

Browse files
imrishit98imrishit98
authored
Add files via upload
1 parent 427aef5 commit 2d8eba5

2 files changed

Lines changed: 141 additions & 0 deletions

File tree

‎Hi-Lo Game/HiLo.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
var theNum = 0;
2+
var counter = 0;
3+
function randomNum() {
4+
theNum = Math.floor((Math.random() * 100) + 1);
5+
console.log(theNum);
6+
}
7+
8+
var input = document.getElementById("numInput");
9+
input.addEventListener("keyup", function (event) {
10+
if (event.keyCode === 13) {
11+
event.preventDefault();
12+
document.getElementById("guessButton").click();
13+
}
14+
});
15+
16+
function guessNum() {
17+
counter++;
18+
document.getElementById("counter").innerHTML = counter;
19+
var numIn = 0;
20+
numIn = document.getElementById("numInput").value;
21+
console.log(numIn);
22+
if (numIn > theNum) {
23+
console.log("high");
24+
document.getElementById("theIcon").className = "fas fa-arrow-down";
25+
document.body.style.backgroundColor = "red";
26+
//document.body.style.backgroundImage = "linear-gradient(-90deg, red " + theNum + "%, green)";
27+
//document.body.style.backgroundImage = "linear-gradient(-90deg, red, green " + (100 * numIn) / theNum + "%)";
28+
//document.body.style.background = "linear-gradient(to right, rgba(0, 255, 0, 1) " + (((100 * numIn) / theNum)) + "%, rgba(255, 0, 0, 1) 100%)";
29+
//document.getElementById("mainContainer").style.background = "linear-gradient(90deg, rgba(0,255,16,1)" + (((100 * numIn) / theNum)) + "%, rgba(0,0,0,0) 100%)";
30+
console.log((((100 * numIn) / theNum) - 10));
31+
}
32+
else if (numIn < theNum) {
33+
console.log("low");
34+
document.getElementById("theIcon").className = "fas fa-arrow-up";
35+
document.body.style.backgroundColor = "red";
36+
//document.body.style.backgroundImage = "linear-gradient(-90deg, red, green " + (100 * theNum) / numIn + "%)";
37+
//document.body.style.background = "linear-gradient(to right, rgba(0, 255, 0, 1) " + (((100 * numIn) / theNum)) + "%, rgba(255, 0, 0, 1) 100%)";
38+
//document.getElementById("mainContainer").style.background = "linear-gradient(90deg, rgba(0,255,16,1)" + (((100 * numIn) / theNum)) + "%, rgba(0,0,0,0) 100%)";
39+
console.log((((100 * theNum) / numIn) - 10));
40+
}
41+
else if (numIn == theNum) {
42+
console.log("match");
43+
document.getElementById("theIcon").className = "fas fa-check-circle";
44+
document.getElementById("theGuessing").style.display = "none";
45+
document.getElementById("correctNum").innerHTML = theNum;
46+
document.getElementById("congo").style.display = "block";
47+
document.body.style.backgroundColor = "limegreen";
48+
}
49+
document.getElementById("numInput").value = '';
50+
}

‎Hi-Lo Game/index.html‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<script src="https://kit.fontawesome.com/336de93654.js"></script>
9+
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
10+
<title>Hi-Lo Game</title>
11+
<script src="HiLo.js" defer></script>
12+
<style>
13+
body {
14+
text-align: center;
15+
font-family: 'Open Sans', sans-serif;
16+
background-color: orangered;
17+
color: white;
18+
line-height: 2rem;
19+
}
20+
21+
.mainContent {
22+
position: relative;
23+
}
24+
25+
.vCenter {
26+
width: 100%;
27+
position: absolute;
28+
top: 50%;
29+
left: 50%;
30+
transform: translate(-50%, -50%);
31+
}
32+
33+
.theIcon {
34+
font-size: 121px;
35+
}
36+
37+
.numInput {
38+
text-align: center;
39+
font-size: 31px;
40+
width: 61px;
41+
height: 61px;
42+
border-style: solid;
43+
border-width: 5px;
44+
border-color: white;
45+
color: white;
46+
background-color: transparent;
47+
}
48+
49+
.guessButton {
50+
background-color: white;
51+
border: none;
52+
color: black;
53+
padding: 15px 32px;
54+
text-align: center;
55+
text-decoration: none;
56+
display: inline-block;
57+
font-size: 16px;
58+
margin: 4px 2px;
59+
cursor: pointer;
60+
border-radius: 3px;
61+
}
62+
</style>
63+
</head>
64+
65+
<body onload="randomNum()">
66+
<div class="mainContainer" id="mainContainer">
67+
<div class="vCenter">
68+
<h1 style="font-size: 71px;">Hi-Lo</h1>
69+
<div class="theIcon">
70+
<i class="fas fa-question" id="theIcon"></i>
71+
</div>
72+
<div class="theGuessing" id="theGuessing">
73+
<h1>Choose a number between 1 and 100</h1><br>
74+
<input type="text" id="numInput" class="numInput" /><br><br>
75+
<input type="button" value="Make Your Guess!" onclick="guessNum()" class="guessButton" id="guessButton">
76+
</div>
77+
<div id="congo" style="display: none;">
78+
<br>
79+
<h1 style="font-size: 71px;" id="correctNum"></h1><br>
80+
<h1>🎉Congratulations! You guessed correct number✌️</h1>
81+
<input type="button" value="Play Again!" onclick="location.reload()" class="guessButton">
82+
</div>
83+
<br>
84+
<p>Number of guesses: <b id="counter"></b></p>
85+
</div>
86+
87+
</div>
88+
89+
</body>
90+
91+
</html>

0 commit comments

Comments
 (0)