Skip to content

Commit 0145217

Browse files
AnaskaysarAnaskaysar
committed
first project with improvments
0 parents  commit 0145217

File tree

5 files changed

+320
-0
lines changed

5 files changed

+320
-0
lines changed

‎01_Guess_My_Number/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"singleQuote": true,
3+
"arrowParens": "avoid"
4+
}

‎01_Guess_My_Number/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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Guess My Number!</title>
9+
</head>
10+
<body>
11+
<header>
12+
<h1>Guess My Number!</h1>
13+
<p class="between">(Between 1 and 20)</p>
14+
<button class="btn again">Again!</button>
15+
<div class="number">?</div>
16+
</header>
17+
<main>
18+
<section class="left">
19+
<input type="number" class="guess" />
20+
<button class="btn check">Check!</button>
21+
</section>
22+
23+
<section class="right">
24+
<p class="message">Start guessing...</p>
25+
<p class="label-score">💯 Score: <span class="score">20</span></p>
26+
<p class="label-highscore">
27+
🥇 Highscore: <span class="highscore">0</span>
28+
</p>
29+
</section>
30+
</main>
31+
<script src="script.js"></script>
32+
</body>
33+
</html>

‎01_Guess_My_Number/readme.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# 🎯 Guess My Number!
2+
3+
A simple number guessing game built with **HTML**, **CSS**, and **JavaScript** to practice **DOM manipulation** and interactive logic.
4+
5+
## 🧠 How It Works
6+
7+
- The game generates a **random number between 1 and 20**
8+
- The player has to guess the number by entering input and clicking **"Check!"**
9+
- Feedback is shown:
10+
- `"Too High"` or `"Too Low"` for incorrect guesses
11+
- `"Hurray! You matched the secret number"` for a correct guess
12+
- The player starts with a **score of 20**, which decreases with each wrong guess
13+
- A **"Highscore"** is tracked across game sessions
14+
- The **"Again!"** button resets the game without reloading the page
15+
16+
---
17+
18+
## 📂 Project Structure
19+
20+
```plaintext
21+
.
22+
├── index.html # Main HTML layout
23+
├── style.css # Styling and layout (retro-inspired look)
24+
└── script.js # Game logic and DOM interactions
25+
```
26+
27+
## 🚀 Features
28+
29+
- Real-time user feedback with visual styling
30+
- Score tracking and highscore comparison
31+
- DOM updates based on game state
32+
- "Play Again" functionality
33+
- Input validation to limit guesses between 1 and 20
34+
35+
---
36+
37+
## 📸 Screenshot
38+
39+
> _(Insert a screenshot of your game UI here if available)_
40+
41+
---
42+
43+
## 🛠️ What I Learned
44+
45+
- Selecting and updating DOM elements
46+
- Handling user events (`click`, `input`)
47+
- Writing reusable functions like `displayMessage()`
48+
- Using conditions and state to control flow
49+
50+
---
51+
52+
## 🧩 Future Improvements
53+
54+
- Difficulty levels (Easy, Medium, Hard)
55+
- Display list of previous guesses
56+
- Add a countdown timer
57+
- Provide hints
58+
- Sound effects for correct/wrong guesses
59+
60+
---
61+
62+
## ✅ Try It Yourself
63+
64+
To run the game:
65+
66+
1. Clone or download this repository
67+
2. Open `index.html` in your browser
68+
3. Start guessing!
69+
70+
---
71+
72+
## 🙌 Credits
73+
74+
Made with ❤️ while learning DOM manipulation as part of my JavaScript recap journey.

‎01_Guess_My_Number/script.js‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
'use strict';
2+
3+
// Generate a random secret number between 1 and 20
4+
let secretNumber = Math.trunc(Math.random() * 20) + 1;
5+
6+
// Initialize score and highest score variables
7+
let score = 20;
8+
let highestScore = 0;
9+
10+
// Set initial score on UI
11+
document.querySelector('.score').textContent = score;
12+
13+
// Utility function to display messages to the user
14+
const displayMessage = function (message) {
15+
document.querySelector('.message').textContent = message;
16+
};
17+
18+
// Event listener for the "Check!" button
19+
document.querySelector('.check').addEventListener('click', function () {
20+
// Get user's guess from input field and convert it to a number
21+
const guessNumber = Number(document.querySelector('.guess').value);
22+
23+
// If input is empty or zero (falsy value)
24+
/* Feature Challenge #1: Limit the Guessing Range
25+
1. Inside your click event handler for the 'Check!' button, after converting the input to a number:
26+
2. Add a condition to check if the number is less than 1 or greater than 20
27+
3. If it is, use displayMessage() to show something like "⛔ Enter a number between 1 and 20!"
28+
4. Make sure to return early so the rest of the code does not run
29+
5. This will prevent the game from counting invalid inputs as a real attempt
30+
*/
31+
if (!guessNumber || guessNumber < 1 || guessNumber > 20) {
32+
displayMessage('No Number Found');
33+
} else if (guessNumber === secretNumber) {
34+
// Reveal the secret number
35+
document.querySelector('.number').textContent = secretNumber;
36+
37+
// Show success message
38+
displayMessage('Hurray! You matched the secret number');
39+
40+
// Change background and number box styling
41+
document.querySelector('body').style.backgroundColor = '#60b347';
42+
document.querySelector('.number').style.width = '30rem';
43+
44+
// Update high score if current score is greater
45+
if (score > highestScore) {
46+
highestScore = score;
47+
document.querySelector('.highscore').textContent = highestScore;
48+
}
49+
50+
// If guess is incorrect (either too high or too low)
51+
} else if (guessNumber !== secretNumber) {
52+
// If player still has remaining score
53+
if (score > 1) {
54+
// Show hint and reduce score
55+
displayMessage(guessNumber > secretNumber ? 'Too High' : 'Too Low');
56+
score--;
57+
document.querySelector('.score').textContent = score;
58+
} else {
59+
// If no score left, player loses
60+
displayMessage('Alas! You lost the game');
61+
document.querySelector('.score').textContent = 0;
62+
}
63+
}
64+
});
65+
66+
// Event listener for the "Again!" button (reset the game)
67+
document.querySelector('.again').addEventListener('click', function () {
68+
// Generate new secret number
69+
secretNumber = Math.trunc(Math.random() * 20) + 1;
70+
71+
// Reset score to 20
72+
score = 20;
73+
74+
// Restore UI to initial state
75+
document.querySelector('body').style.backgroundColor = '#222';
76+
displayMessage('Start guessing.....');
77+
document.querySelector('.guess').value = '';
78+
document.querySelector('.number').textContent = '?';
79+
document.querySelector('.number').style.width = '15rem';
80+
document.querySelector('.score').textContent = score;
81+
});
82+
83+
84+
/*
85+
1. Inside your click event handler for the 'Check!' button, after converting the input to a number:
86+
2. Add a condition to check if the number is less than 1 or greater than 20
87+
3. If it is, use displayMessage() to show something like "⛔ Enter a number between 1 and 20!"
88+
4. Make sure to return early so the rest of the code does not run
89+
5. This will prevent the game from counting invalid inputs as a real attempt
90+
*/

‎01_Guess_My_Number/style.css‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: inherit;
7+
}
8+
9+
html {
10+
font-size: 62.5%;
11+
box-sizing: border-box;
12+
}
13+
14+
body {
15+
font-family: 'Press Start 2P', sans-serif;
16+
color: #eee;
17+
background-color: #222;
18+
/* background-color: #60b347; */
19+
}
20+
21+
/* LAYOUT */
22+
header {
23+
position: relative;
24+
height: 35vh;
25+
border-bottom: 7px solid #eee;
26+
}
27+
28+
main {
29+
height: 65vh;
30+
color: #eee;
31+
display: flex;
32+
align-items: center;
33+
justify-content: space-around;
34+
}
35+
36+
.left {
37+
width: 52rem;
38+
display: flex;
39+
flex-direction: column;
40+
align-items: center;
41+
}
42+
43+
.right {
44+
width: 52rem;
45+
font-size: 2rem;
46+
}
47+
48+
/* ELEMENTS STYLE */
49+
h1 {
50+
font-size: 4rem;
51+
text-align: center;
52+
position: absolute;
53+
width: 100%;
54+
top: 52%;
55+
left: 50%;
56+
transform: translate(-50%, -50%);
57+
}
58+
59+
.number {
60+
background: #eee;
61+
color: #333;
62+
font-size: 6rem;
63+
width: 15rem;
64+
padding: 3rem 0rem;
65+
text-align: center;
66+
position: absolute;
67+
bottom: 0;
68+
left: 50%;
69+
transform: translate(-50%, 50%);
70+
}
71+
72+
.between {
73+
font-size: 1.4rem;
74+
position: absolute;
75+
top: 2rem;
76+
right: 2rem;
77+
}
78+
79+
.again {
80+
position: absolute;
81+
top: 2rem;
82+
left: 2rem;
83+
}
84+
85+
.guess {
86+
background: none;
87+
border: 4px solid #eee;
88+
font-family: inherit;
89+
color: inherit;
90+
font-size: 5rem;
91+
padding: 2.5rem;
92+
width: 25rem;
93+
text-align: center;
94+
display: block;
95+
margin-bottom: 3rem;
96+
}
97+
98+
.btn {
99+
border: none;
100+
background-color: #eee;
101+
color: #222;
102+
font-size: 2rem;
103+
font-family: inherit;
104+
padding: 2rem 3rem;
105+
cursor: pointer;
106+
}
107+
108+
.btn:hover {
109+
background-color: #ccc;
110+
}
111+
112+
.message {
113+
margin-bottom: 8rem;
114+
height: 3rem;
115+
}
116+
117+
.label-score {
118+
margin-bottom: 2rem;
119+
}

0 commit comments

Comments
 (0)