Skip to content

Commit 5181493

Browse files
PBJIPBJI
authored
Merge pull request #734 from vinay-s36/vinay-s36-guessit
Guessing the random number project
2 parents 18151dc + 92df258 commit 5181493

File tree

4 files changed

+145
-0
lines changed

4 files changed

+145
-0
lines changed

‎NumberGuessingGame/vinay-s36/README.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
#### Summary
2+
Guess It - The Random Number Guesser project in JavaScript is an interactive web application that challenges users to guess a randomly generated number within a specified range. It provides an engaging way to learn and practice JavaScript programming while creating a fun user experience.
3+
4+
#### Setup
5+
1. Fork the repository from github [vinay-s36](https://github.com/vinay-s36/Guess-It)
6+
2. clone the repository
7+
3. Run it using any IDE like [VSCode](https://code.visualstudio.com/) or even simple text editors will work
8+
9+
#### Live project link - https://vinay-s36.github.io/Guess-It/
10+
11+
#### Screenshot
12+
![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/bc76a0db-5a8e-4e7c-ba68-1d7a349f2039)
13+
14+
![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/057b5532-dd81-4b24-9b60-790a62b1ee7f)
15+
16+
![image](https://github.com/thinkswell/javascript-mini-projects/assets/124019116/661e2419-e582-40f2-92de-81b1adfe86b8)
17+
18+
Let me know if there are any issues 😁
19+
#### Happy Coding All ####

‎NumberGuessingGame/vinay-s36/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link href="style.css" rel="stylesheet" />
7+
<link
8+
href="https://fonts.googleapis.com/css?family=Open+Sans"
9+
rel="stylesheet"
10+
/>
11+
<link
12+
rel="icon"
13+
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>❓</text></svg>"
14+
/>
15+
<title>Guess It</title>
16+
</head>
17+
<body>
18+
<div class="card">
19+
<div class="card-content">
20+
<h1>Guess My Number 😉</h1>
21+
<p>Guess the number between 1 and 100</p>
22+
<input type="text" class="numberguess" id="number" required /><br />
23+
<button onclick="makeGuess()">Guess</button>
24+
<span style="margin-right: 15px"></span>
25+
<button onclick="newtarget()" style="width: 30%">New target</button>
26+
<br /><br />
27+
<p id="error-message" style="color: red"></p>
28+
<p id="result"></p>
29+
</div>
30+
</div>
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎NumberGuessingGame/vinay-s36/script.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
let num = Math.floor(Math.random() * 100)+1;
2+
let chances = 0;
3+
let message;
4+
const guess=document.getElementById("result");
5+
const errorMessage = document.getElementById("error-message");
6+
7+
function makeGuess() {
8+
var inputElement=document.getElementById("number");
9+
var inputValue=inputElement.value;
10+
11+
if (inputValue.trim() === "") {
12+
errorMessage.textContent = "Please enter a number before guessing.";
13+
return; // Stop execution if no input is provided
14+
}
15+
errorMessage.textContent = "";
16+
17+
chances++;
18+
if (inputValue == num) {
19+
message=`Congratulations! You guessed the number ${num} in ${chances} attempts.`;
20+
}
21+
else
22+
{
23+
if (num > inputValue) {
24+
message=`Your guess is less than the number`;
25+
} else {
26+
message=`Your guess is greater than the number`;
27+
}
28+
}
29+
inputElement.value = "";
30+
guess.innerHTML=message;
31+
}
32+
33+
function newtarget() {
34+
num = Math.floor(Math.random() * 100)+1;
35+
chances=0;
36+
result.innerHTML = "";
37+
errorMessage.textContent = "";
38+
}

‎NumberGuessingGame/vinay-s36/style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
body {
2+
background-image: linear-gradient(120deg, #C6EA8D 0%, #FE90AF 100%);
3+
background-size: cover;
4+
background-attachment: fixed;
5+
font-size: 16px;
6+
margin: 0;
7+
padding: 0;
8+
}
9+
10+
@media (max-width: 768px) {
11+
body {
12+
font-size: 14px;
13+
}
14+
}
15+
16+
.card{
17+
border: 1px solid #ccc;
18+
border-radius: 10px;
19+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
20+
max-width: 500px;
21+
width: 80%;
22+
margin: 10% auto;
23+
height: 320px;
24+
padding: 20px;
25+
font-family: 'Open Sans', sans-serif;
26+
background-color: #fff;
27+
}
28+
29+
.card-content{
30+
text-align: center;
31+
}
32+
33+
.numberguess{
34+
width: 130px;
35+
padding:15px;
36+
font-size: larger;
37+
border-radius: 10px;
38+
}
39+
40+
p{
41+
font-size: larger;
42+
}
43+
button{
44+
cursor: pointer;
45+
width: 23%;
46+
border-radius: 10px;
47+
position: relative;
48+
top: 15px;
49+
padding: 10px;
50+
font-size: larger;
51+
}
52+
53+
button:hover{
54+
background-color: #ccc;
55+
}

0 commit comments

Comments
 (0)