Guess the Emoji is an interactive one-page game where players try to guess words, phrases, movies, or songs based on emoji clues. It was developed as part of a hackaton by:
👨🏽💻Jesse Obeng
👨🏽💻Ammaar Bhula
👩🏽💻Nadia Bakal
🔗 Play the Game Here: Guess The Emoji
- 📌 Project Overview
- 🎨 UX/UI Design
- 🚀 Features
- 🛠️ Built With
- ✅ Testing
- 🚀 Deployment
- 🔮 Future Features
- 🐞 Known Bugs
- 📜 Citation
🎯 Key Objectives:
- Build a one-page interactive front-end web application using HTML, CSS, and JavaScript.
- Focus on user experience, accessibility, responsiveness, and DOM manipulation.
- Test and validate the application using W3C Validator and Jigsaw Validator.
- Deploy the project using Git and GitHub Pages.
As a player, I want to...
✅ See emojis displayed prominently so I can guess their meaning.
✅ Enter my guess in an input field and submit my answer.
✅ Receive immediate feedback on whether my guess is correct.
✅ Keep track of my score as I play.
✅ Request hints when needed.
✅ Have a timer for each round (optional).
✅ Enjoy smooth animations and fun visuals.
✅ Play on mobile, tablet, and desktop devices seamlessly.
The colour palette for the Guess the Emoji game was carefully chosen to create a fun, energetic, and engaging experience.
| Colour | Hex Code | Usage |
|---|---|---|
| 🔴 Coral Red | #FF6F61 |
Background, buttons, header gradient |
| 🟡 Sunshine Yellow | #FFCC5C |
Buttons, score display, header gradient |
| 🟠 Warm Orange | #FFB347 |
Button hover effect |
| ⚪ White | #FFFFFF |
Emoji display background, modal background |
| ⚫ Dark Grey | #333333 |
Main text colour |
| 🟤 Shadow Grey | rgba(0, 0, 0, 0.3) |
Box shadows and subtle depth effects |
These colours help create a playful and vibrant look while ensuring readability and accessibility.
created on: https://coolors.co/
The project uses Fredoka, a friendly and modern font that enhances readability.
Detailed wireframes were created for mobile, tablet, and desktop layouts.
📌 **View Wireframes:
Add wireframe image
The site uses emoji-based visuals rather than external images to create a fun and lightweight experience.
✅ Random Emoji Puzzles – Guess phrases, movies, and songs from emojis.
✅ Interactive Input & Submit Button – Players type their guess and submit.
✅ Instant Feedback – Green for correct, red for incorrect.
✅ Score Tracking – Score updates dynamically.
✅ Hint System – Players can get a hint (e.g., first letter of each word).
✅ Game Timer – A countdown adds urgency to the challenge (optional).
✅ Confetti & Bounce Animations for correct answers.
✅ Responsive Design – Works on mobile, tablet, and desktop.
✅ Accessible for Screen Readers – ARIA attributes included.
- Google Fonts (Fredoka)
- Confetti.js (for fun animations)
- GitHub – Version control & deployment
- VS Code – Code editor
- Chrome DevTools – Debugging & testing
- ✅ HTML Validation – Checked with W3C Validator.
- ✅ CSS Validation – Tested with Jigsaw Validator.
- ✅ JavaScript Debugging – Console logging & error fixing.
- ✅ Lighthouse Performance Testing – Checked for accessibility, SEO, and speed.
- ✅ Responsiveness Testing – Tested on mobile, tablet, and desktop.
📌 Live Demo: Guess The Emoji Game
🚀 More difficulty levels (Easy, Medium, Hard).
🚀 Leaderboard (Store high scores using localStorage).
🚀 Multiplayer mode (Compete with friends).
🚀 Dark Mode Toggle.
❌ Some screen reader feedback may need improvements.
❌ Timer resets inconsistently in some cases.
The following resources were used in the development of Guess the Emoji:
- Fredoka font from Google Fonts
- Emoji Background Texture: Sourced from Transparent Textures
- Favicon: Sourced from Coolors
- HTML & CSS Validation Tools: W3C Validator & Jigsaw CSS Validator
- JavaScript Debugging: Chrome DevTools Documentation
- GitHub Hosting: Project is hosted using GitHub Pages
- Microsoft Copilot: Microsoft Copilot for providing AI-powered support in Visual Studio Code.
🎉 Thank you for playing Guess The Emoji! 🎭 We hope you enjoyed it 🚀