Flip the coin | devChallenges

Solution for a challenge Flip The Coin from devChallenges.io.

Demo | Solution | Challenge

Table of Contents

• Overview
  • What I learned
  • Useful resources
• Built with
• Features
• Contact
• Acknowledgements

Overview

This is an interactive Flip the Coin game built with vanilla HTML, CSS, and JavaScript. Click the button or the coin to flip it and get a random result (Heads or Tails). The application features smooth animations, responsive design, and a modern UI with semantic color palettes.

What I learned

• CSS Animations & Easing Functions: Used cubic-bezier with overshoot effects to create bouncy, elastic spinning animations
• Semantic Color Palettes: Implemented 16 CSS custom properties organized by function (primary accent, background, text, shadows) for better maintainability
• Responsive Design: Used CSS clamp() function for fluid scaling across mobile, tablet, and desktop viewports
• Event Management: Handled button interactions with proper state management and animation timing
• DOM Manipulation: Dynamically updated coin images and results while animations were in progress
• Web Audio API: Generated procedural sound effects for coin flip interactions (optional enhancement)

Useful resources

• MDN - CSS Animations - Helped understand animation timing and cubic-bezier functions
• CSS Tricks - A Complete Guide to Flexbox - Layout and alignment techniques
• Web.dev - Responsive Design - Responsive viewport and clamp() techniques

Built with

• HTML5 - Semantic markup structure
• CSS3 - Custom properties (variables), animations, flexbox, responsive design with clamp()
• JavaScript - Event handling, DOM manipulation, animation control
• Raleway Font - Google Fonts for modern typography
• Semantic Color System - 16 CSS variables for maintainable color management

Features

• ✨ Smooth Coin Animation - Elastic spinning effect with cubic-bezier easing
• 🎲 Random Result Generator - 50/50 chance between Heads and Tails
• 📱 Fully Responsive - Works seamlessly on mobile (412px), tablet (1024px), and desktop (1350px+)
• 🎨 Semantic Color Palette - 16 CSS custom properties for consistency and maintainability
• ⚡ Interactive Button - 3D effect with shadow on hover and click states
• 🖼️ Dynamic Image Updates - Coin face changes based on flip result
• ♿ Accessible Design - Proper contrast ratios and semantic HTML
• 🎵 Optional Sound Effects - Web Audio API for procedural coin flip sounds

Acknowledgements

• devChallenges.io - For the project challenge and design reference
• Google Fonts - Raleway - Beautiful typography
• Community feedback on animation performance and responsive design

Author

• GitHub: @mathbkj