Three weeks ago i built debugged, and did CSS animations — here’s how I tackled Stage 1!
The Task: A Color Guessing Game
For Stage 1 of the HNG Internship, I built a color-matching game using HTML, CSS, and vanilla JavaScript. The requirements were intense but rewarding:
Game Requirements:
-
Target Color Box (
data-testid="colorBox") displaying a random color. -
6 Color Options (
data-testid="colorOption") as buttons with background colors. -
Score Tracker (
data-testid="score"), Game Status updates (data-testid="gameStatus"), and New Game Button (data-testid="newGameButton"). - Responsive Design: Playable on all devices with smooth animations for feedback.
Key Features:
✅ No hex codes — players match colors visually!
✅ CSS animations for correct/wrong guesses (fade-outs, celebrations).
✅ Dynamic score updates and game reset functionality.
Play the game here: Color Game Demo
Challenges I Faced
1️⃣ CSS Animations:
Syncing animations with JavaScript logic was tricky. For example, triggering a “celebration” pulse for correct guesses while disabling buttons during transitions took careful timing.
2️⃣ Mobile-First Design:
Ensuring buttons stayed clickable on smaller screens required media queries and touch-friendly sizing.
3️⃣ Random Color Generation:
Avoiding duplicate colors in the options array forced me to refine my algorithm for shuffling and filtering.
How Scrimba Saved the Day (Again!)
Shoutout to Scrimba for their interactive courses! Their JavaScript and CSS modules gave me the confidence to:
- Write clean event listeners for button clicks.
- Master CSS transitions and keyframes for animations.
- Structure code modularly for easy debugging.
This task felt like a natural extension of their project-based learning style!
Behind the Scenes: Code & Deadlines
- GitHub Repo: myHNGInternship-journey
- Time Crunch: Completed 3 weeks ago alongside internship tasks — a true test of prioritization!
What’s Next?
Stage 2 is already on the horizon! Follow my journey for updates:
- X (Twitter): @Toptech5419
- LinkedIn: Toptech5419
- Medium: @alabitemitope51
Final Thoughts
Building this game taught me the importance of balancing functionality with user experience. If you’re learning frontend development, embrace projects like this — they’re the best way to grow!
Questions about the code or design? Drop a comment below!
#HNGInternship #FrontendDevelopment #WebDev #LearningInPublic
Top comments (0)