A sleek, interactive Number Guessing Game built with vanilla HTML, CSS, and JavaScript — featuring a dark glassmorphism UI, animated hints, confetti celebrations, and a persistent best-score tracker.
Open
index.htmldirectly in any modern browser — no server or install needed.
- 🎨 Dark Glassmorphism UI — frosted glass card with glowing neon orbs and floating particles
- 🌡️ Live Thermometer — slides as your guess gets closer or farther from the secret number
- 🔥 Smart Hints — color-coded feedback: Too Low / Too High / Burning Hot / So Close!
- 💊 Guess History — all your previous guesses shown as colored pills
- 🏆 Best Score Tracker — saved in
localStorage, persists between sessions - 🎉 Confetti Win Screen — score calculation + attempt count on victory
- ⌨️ Keyboard Friendly — press
Enterto start or submit a guess - 📱 Fully Responsive — works great on mobile and desktop
| Screen | Description |
|---|---|
| Setup | Choose your maximum number range (e.g. 1–100) |
| Game | Guess the secret number with live hints & thermometer |
| Win | Confetti explosion + attempts, score, and best score stats |
Guess-number-main/
├── index.html # 3-screen layout: Setup → Game → Win
├── style.css # Dark theme, animations, glassmorphism, responsive styles
├── app.js # Game logic, hint engine, confetti, localStorage
└── README.md # This file
| Technology | Usage |
|---|---|
| HTML5 | Semantic structure, 3 distinct screen layouts |
| CSS3 | Glassmorphism, keyframe animations, CSS variables, responsive grid |
| JavaScript (ES6+) | Game logic, DOM manipulation, localStorage API |
| Google Fonts | Outfit for modern typography |
- Open
index.htmlin your browser - Enter a maximum number (e.g.
100) and click Start Game - Type your guess and hit Guess! or press
Enter - Follow the hints — the thermometer and color-coded banners guide you
- Win by finding the secret number in as few guesses as possible!
- Your best score is automatically saved for next time 🏆
Score = round(1000 / attempts)
The fewer guesses you take, the higher your score!
- Animated background — glowing orbs + floating neon particles
- Thermometer slider — visually tracks how close your guess is
- Pill history — blue for too low, red for too high, green for correct
- Shake animation — on invalid input
- Bounce + confetti — on winning
Built by Suhas · Powered by vanilla web technologies · No frameworks, no dependencies.