Skip to content

Commit 0d2e2a1

Browse files
ankitjhagithub21ankitjhagithub21
committed
added guess-number game
1 parent 8ddd19c commit 0d2e2a1

5 files changed

Lines changed: 179 additions & 0 deletions

File tree

‎Web Devlopment Project/Guess The Number/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Guess The Number Game
2+
Guess the number game built with bootstrap and javascript. The game allow users to guess a number between 0 to 100.
3+
4+
## Features
5+
1. Allow users to guess a number between 0 to 100
6+
2. Provides feedback to the user if their guess is too high or too low.
7+
3. Number of attempts is not fixed
8+
4. Option to exit the game and reveal the correct number.
9+
10+
## Screenshot
11+
![image](https://github.com/ankitjha2023/guess-number/assets/127032700/6911de72-3297-4211-aaa8-e92cffe3f23d)
12+
13+
## Demo
14+
You can play the "Guess the Number" game here ('''https://ankitjhagithub21.github.io/guess-number/''')

‎Web Devlopment Project/Guess The Number/app.js‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
const btnCheck = document.getElementById('btn-check')
2+
const input = document.getElementById('input')
3+
const alertPara = document.getElementById('alert-para')
4+
const newBtn = document.getElementById('new')
5+
const count = document.getElementById('count')
6+
const inputs = document.getElementById('inputs')
7+
let total=0;
8+
let pcGuess = Math.floor(Math.random()*100)+1
9+
10+
const quit = document.getElementById('quit')
11+
12+
13+
14+
btnCheck.addEventListener('click',()=>{
15+
16+
let inputValue = Number(input.value)
17+
quit.style.display="block"
18+
if(input.value==""){
19+
alert("Input field is empty")
20+
}else{
21+
22+
if(inputValue <= 0){
23+
alert("Number should greater than 0")
24+
}else if(inputValue >= 100){
25+
alert("Number should less than 100")
26+
}else{
27+
28+
if(inputValue == pcGuess){
29+
total++
30+
count.innerHTML=total
31+
alertPara.classList.add('text-success')
32+
alertPara.innerHTML = "Congrats You guessed the correct number."
33+
34+
btnCheck.disabled="true"
35+
newBtn.style.display="block"
36+
inputs.innerHTML += inputValue + " ";
37+
quit.style.display="none"
38+
39+
40+
}else if(inputValue>pcGuess){
41+
total++
42+
count.innerHTML=total
43+
alertPara.innerHTML = "Too High ! Guess Again."
44+
45+
inputs.innerHTML += inputValue + " ";
46+
setTimeout(()=>{
47+
alertPara.innerHTML = ""
48+
},3000)
49+
input.value=""
50+
}else{
51+
total++
52+
count.innerHTML=total
53+
alertPara.innerHTML = "Too Low ! Guess Again."
54+
55+
inputs.innerHTML += inputValue + " ";
56+
setTimeout(()=>{
57+
alertPara.innerHTML = ""
58+
},3000)
59+
input.value=""
60+
}
61+
}
62+
}
63+
64+
})
65+
66+
newBtn.addEventListener('click',()=>{
67+
window.location.reload()
68+
})
69+
70+
71+
function quitGame(btn){
72+
73+
alertPara.innerHTML = "The Correct Number is " + pcGuess+"."
74+
btn.style.display="none"
75+
btnCheck.disabled="true"
76+
newBtn.style.display="block"
77+
78+
}

‎Web Devlopment Project/Guess The Number/guess.jpg‎

60 KB
Loading

‎Web Devlopment Project/Guess The Number/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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">
7+
<title>Guess The Number</title>
8+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
9+
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
13+
<body>
14+
<div class="container border mx-2 shadow">
15+
<div class="row">
16+
<div class="col-md-6">
17+
<img src="guess.jpg" class="img-fluid p-4 mx-auto">
18+
</div>
19+
<div class="col-md-6 text-center p-4 d-flex flex-column align-items-center justify-content-center">
20+
<div class="typewriter">
21+
<h4>Guess a number between 0 to 100.</h4>
22+
</div>
23+
<div class="d-flex gap-2 my-3">
24+
<input type="number" id="input" class="form-control">
25+
<button class="btn btn-primary" id="btn-check">Check</button>
26+
27+
</div>
28+
<p id="alert-para" class="fs-5"></p>
29+
<p class="fs-4 text-success">Total Attempts: <span id="count" class="text-primary">0</span></p>
30+
<p class="fs-5 text-success">Previous Guess:<span id="inputs" class="text-primary"></span></p>
31+
<button class="btn btn-info" id="new">New Game</button>
32+
<button class="btn btn-danger" id="quit" onclick="quitGame(this)">Quit</button>
33+
34+
</div>
35+
</div>
36+
</div>
37+
<script src="app.js"></script>
38+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
39+
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
40+
crossorigin="anonymous"></script>
41+
</body>
42+
43+
</html>

‎Web Devlopment Project/Guess The Number/style.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@import url('https://fonts.googleapis.com/css2?family=PT+Serif&display=swap');
2+
body{
3+
height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
font-family: 'PT Serif', serif;
8+
}
9+
10+
#new{
11+
display: none;
12+
}
13+
14+
.typewriter h4 {
15+
16+
color: rgb(14, 108, 175);
17+
overflow: hidden; /* Ensures the content is not revealed until the animation */
18+
white-space: nowrap;
19+
border-right: .10em solid rgb(0, 106, 255);
20+
/* The typwriter cursor */
21+
/* Keeps the content on a single line */
22+
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
23+
/* Adjust as needed */
24+
animation:
25+
typing 3.5s steps(30, end),
26+
blink-caret .5s step-end infinite;
27+
}
28+
29+
/* The typing effect */
30+
@keyframes typing {
31+
from { width: 0 }
32+
to { width: 100% }
33+
}
34+
35+
@keyframes blink-caret {
36+
from, to { border-color: transparent }
37+
50% { border-color: rgb(0, 106, 255) }
38+
}
39+
40+
#quit{
41+
display: none;
42+
43+
44+
}

0 commit comments

Comments
 (0)