https://github.com/msarmadqadeer/guess-the-number

This project is a browser-based game created in HTML, CSS, and JS. Its created with the concept of DOM manipulation in JS.
https://github.com/msarmadqadeer/guess-the-number

browser-game browser-localstorage css dom-manipulation guess-number-game guess-the-number html js

Last synced: 20 days ago
JSON representation

This project is a browser-based game created in HTML, CSS, and JS. Its created with the concept of DOM manipulation in JS.

• Host: GitHub
• URL: https://github.com/msarmadqadeer/guess-the-number
• Owner: MSarmadQadeer
• Created: 2022-01-21T18:02:14.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-01-07T09:09:23.000Z (about 2 years ago)
• Last Synced: 2024-11-18T13:48:25.902Z (3 months ago)
• Topics: browser-game, browser-localstorage, css, dom-manipulation, guess-number-game, guess-the-number, html, js
• Language: CSS
• Homepage: https://msarmadqadeer.github.io/guess-the-number/
• Size: 303 KB
• Stars: 0
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# guess-the-number

This project is a **browser-based game** created in HTML, CSS, and JS. Its created with the concept of **DOM manipulation** in JS.

## game description

When the game starts, a secret random number is generated. That secret number is in the range of 1 - 20. And the player has to guess that secret number.

At the start, a player has a score of 20 points. On each wrong guess, the score is decremented by 1.

:white_check_mark: **win condition** : player guessed the number

:x: **loss condition** : score becomes zero

## technical point

Each time the game starts, the **high score** is fetched from the **browser's local storage** if the high score exists.

And when a player scores a high score then that score is stored in the browser's local storage.

## screens

### main screen

![](./screens/screen1.png)

### win screens

![](./screens/screen2.png)

![](./screens/screen3.png)

### loss screens

![](./screens/screen4.png)

![](./screens/screen5.png)

## site link

By [Clicking Me](https://msarmadqadeer.github.io/guess-the-number/) you'll see the live version of this project. If you like the project, star ⭐ the repo!