Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shadyashraf174/guess-my-number
It is a simple browser-based game where players attempt to guess a randomly generated number between 1 and 20.
https://github.com/shadyashraf174/guess-my-number
css dom game html javascript
Last synced: 2 days ago
JSON representation
It is a simple browser-based game where players attempt to guess a randomly generated number between 1 and 20.
- Host: GitHub
- URL: https://github.com/shadyashraf174/guess-my-number
- Owner: shadyashraf174
- Created: 2024-11-30T18:01:12.000Z (22 days ago)
- Default Branch: main
- Last Pushed: 2024-11-30T18:16:58.000Z (22 days ago)
- Last Synced: 2024-11-30T19:24:21.248Z (22 days ago)
- Topics: css, dom, game, html, javascript
- Language: JavaScript
- Homepage: https://www.udemy.com/course/the-complete-javascript-course/
- Size: 4.88 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **Guess My Number Game**
#### Inspired by [Jonas Schmedtmann](https://github.com/jonasschmedtmann) || See it live at [CodePen](https://codepen.io/shady-ashraf/pen/XJrbJKL)
###### *Guess My Number* is a simple browser-based game where players attempt to guess a randomly generated number between 1 and 20. This project demonstrates the use of basic HTML, CSS, and JavaScript for building interactive web applications.
---
## **Table of Contents**
- [Overview](#overview)
- [Features](#features)
- [File Structure](#file-structure)
- [HTML Details](#html-details)
- [CSS Styling](#css-styling)
- [JavaScript Logic](#javascript-logic)
- [Deployment](#deployment)
- [Selectors Used in the Project](#selectors-used-in-the-project)
---
## **Overview**
The **Guess My Number Game** challenges users to guess a number while providing feedback like "Too high" or "Too low." The game tracks the score and high score for each session.
**Technologies used:**
- HTML5
- CSS3
- JavaScript (ES6)
---
## **Features**
- **Random Number Generation**: A secret number is generated for every game session.
- **User Feedback**: Dynamic messages guide the player.
- **Score Tracking**: Displays current score and high score.
- **Reset Option**: Players can restart the game at any time.
- **Interactive Visuals**: Background color changes on win or loss.
---
## **File Structure**
```plaintext
guess-my-number/
├── index.html
├── style.css
└── script.js
```
---
## **HTML Details**
The HTML file (`index.html`) structures the user interface of the game.
### Key Sections:
- **Header**:
Contains the game title, range information, and "Again!" button for resetting.
```html
Guess My Number!
(Between 1 and 20)
Again!
?
```
- **Main**:
Divided into two sections:
- **Left**: Input field for the guess and "Check!" button.
- **Right**: Displays game messages, score, and high score.
---
## **CSS Styling**
The CSS file (`style.css`) provides the retro-inspired visual style and responsive design.
### Key Styles:
- **Theme and Font**:
- Dark background (`#222`) with light text (`#eee`).
- Retro font (`Press Start 2P`) imported via Google Fonts.
- **Dynamic Feedback**:
- Background changes to green on win (`#60b347`) and red on loss (`#e3877f`).
- **Layout**:
- Flexbox for centering elements.
- Responsive input fields and buttons for usability.
### Snippet:
```css
body {
font-family: "Press Start 2P", sans-serif;
background-color: #222;
color: #eee;
}
.number {
background: #eee;
color: #333;
font-size: 6rem;
width: 15rem;
padding: 3rem 0;
text-align: center;
}
```
---
## **JavaScript Logic**
The JavaScript file (`script.js`) implements the interactive functionality.
### Key Functions:
1. **Random Number Generation**:
```javascript
let secretNumber = Math.trunc(Math.random() * 20) + 1;
```
2. **Guess Checking**:
Compares user input to the secret number and provides feedback:
- Correct guess changes background to green and reveals the number.
- Incorrect guesses decrement the score and provide hints.
```javascript
document.querySelector(".check").addEventListener("click", function () {
const guess = Number(document.querySelector(".guess").value);
if (!guess) {
displayMessage("⛔️ No number!");
} else if (guess === secretNumber) {
displayMessage("🎉 Correct Number!");
document.querySelector("body").style.backgroundColor = "#60b347";
}
});
```
3. **Game Reset**:
Resets the game state with a new random number and default styles.
```javascript
document.querySelector(".again").addEventListener("click", function () {
score = 20;
secretNumber = Math.trunc(Math.random() * 20) + 1;
document.querySelector(".number").textContent = "?";
});
```
---
## **Deployment**
1. Clone the repository:
```bash
git clone https://github.com/shadyashraf174/guess-my-number.git
```
2. Open `index.html` in a web browser to play the game.
---
## **Selectors Used in the Project**
### **HTML Selectors**
- **Element Selectors**:
- ``: Defines the top section of the game.
- ``: Contains the primary game elements.
- ``: Accepts the player's guess.
- **Class Selectors**:
- `.message`: Displays hints and feedback.
- `.score`: Displays the current score.
- `.btn`: Styles interactive buttons.
### **CSS Selectors**
- **Pseudo-classes**:
- `button:hover`: Adds hover effect to buttons.
- **Dynamic Styling**:
- `body` background color changes using `style.backgroundColor`.
---
