Skip to content

Commit b82c357

Browse files
SimpleCodingTutorialsSimpleCodingTutorials
committed
upload
1 parent 580469e commit b82c357

3 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎guess the number/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Document</title>
9+
<link rel="stylesheet" href="fontawesome/css/all.css" />
10+
<link rel="stylesheet" href="style.css" />
11+
12+
</head>
13+
14+
<body>
15+
<div class="container">
16+
<h1>Guess the Number</h1>
17+
<p>Enter the range of numbers:</p>
18+
<div class="inputContainer">
19+
<input type="number" id="min" placeholder="Min">
20+
<input type="number" id="max" placeholder="Max">
21+
<button id="start">Start</button>
22+
</div>
23+
<div class="inputContainer">
24+
<input type="number" id="guess" disabled placeholder="Enter your guess">
25+
<div class="buttonContainer">
26+
<button id="submit" disabled>Submit</button>
27+
<button id="restart" disabled>Restart</button>
28+
</div>
29+
</div>
30+
<p id="message"></p>
31+
</div>
32+
<script src="main.js"></script>
33+
</body>
34+
35+
</html>

‎guess the number/main.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
let secretNumber;
2+
let attempts=0;
3+
let minInput = document.getElementById("min");
4+
let maxInput = document.getElementById("max");
5+
let startButton = document.getElementById("start");
6+
let guessInput = document.getElementById("guess");
7+
let submitButton = document.getElementById("submit");
8+
let restartButton = document.getElementById("restart");
9+
let message = document.getElementById("message");
10+
11+
startButton.addEventListener("click",()=>{
12+
let min = +minInput.value;
13+
let max = +maxInput.value;
14+
if(!isFinite(min)||!isFinite(max)|| min>max){
15+
message.textContent = "Please enter a valid range.";
16+
return;
17+
}
18+
secretNumber = Math.floor(Math.random()*(max-min+1))+min;
19+
attempts=0;
20+
guessInput.disabled=false;
21+
submitButton.disabled=false;
22+
restartButton.disabled=false;
23+
message.textContent="";
24+
minInput.disabled = true;
25+
maxInput.disabled =true;
26+
startButton.disabled =true;
27+
});
28+
submitButton.addEventListener("click",()=>{
29+
let guess = +guessInput.value;
30+
attempts++;
31+
if(!isFinite(guess)|| guess==="") {
32+
message.textContent = "Please enter a valid number.";
33+
return;
34+
}
35+
if(guess<secretNumber){
36+
message.textContent = `your guess of ${guess} is too low.`;
37+
return;
38+
}
39+
if(guess>secretNumber){
40+
message.textContent = `your guess of ${guess} is too high.`;
41+
return;
42+
}
43+
message.textContent = `Congratulations! You guessed the number in ${attempts} attemps.`;
44+
guessInput.disabled = true;
45+
submitButton.disabled = true;
46+
});
47+
48+
restartButton.addEventListener("click",()=>{
49+
let min = +minInput.value;
50+
let max = +maxInput.value;
51+
secretNumber = Math.floor(Math.random()*(max-min+1))+min;
52+
attempts=0;
53+
guessInput.value = "";
54+
message.textContent = "";
55+
minInput.disabled = false;
56+
maxInput.disabled = false;
57+
guessInput.disabled = false;
58+
maxInput.disabled = false;
59+
submitButton.disabled = false;
60+
startButton.disabled = false;
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+

‎guess the number/style.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body{
2+
display: flex;
3+
align-items: center;
4+
justify-content: center;
5+
flex-direction: column;
6+
}
7+
.container {
8+
display: flex;
9+
align-items: center;
10+
justify-content: center;
11+
flex-direction: column;
12+
border: 5px solid black;
13+
border-radius: 5px;
14+
padding: 20px;
15+
font-family: consolas;
16+
background-color: #f8f7f9;
17+
color: #3a2c33;
18+
font-weight: bold;
19+
width: 45vw;
20+
}
21+
h1,p{
22+
text-align: center;
23+
}
24+
.inputContainer{
25+
display: flex;
26+
margin: 5px;
27+
width: 100%;
28+
justify-content: space-between;
29+
flex-wrap: wrap;
30+
}
31+
input {
32+
border-radius: 5px;
33+
height: 25px;
34+
}
35+
.buttonContainer {
36+
display: flex;
37+
justify-content: right;
38+
}
39+
button {
40+
height: 30px;
41+
width: 80px;
42+
border-radius: 5px;
43+
background-color: #508991;
44+
color: white;
45+
margin: 2px;
46+
font-family: consolas;
47+
font-weight: bold;
48+
cursor: pointer;
49+
}
50+
#message {
51+
height: 25px;
52+
text-align: center;
53+
}

0 commit comments

Comments
 (0)