Skip to content

Commit 37180c7

Browse files
vinay-s36vinay-s36
authored
updated structure of the project and added files
1 parent 084818f commit 37180c7

File tree

3 files changed

+126
-0
lines changed

3 files changed

+126
-0
lines changed

‎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)