Color Flipper

A simple web application that changes the background color of the page to a randomly generated HEX color with the click of a button.

Overview

Purpose: This app allows users to randomly change the background color of the webpage by clicking a button. Each color is displayed as a HEX value, making it a fun and interactive tool for experimenting with colors.

Design: The application has a clean, minimalist design with a centered layout. It features a button to flip the color, and the current color is displayed prominently beneath the button.

Functionality: The app generates random HEX colors and updates both the background color and the displayed color value each time the button is clicked.

Test the App

You can test the app directly on CodePen using the following link:
Live Demo

Technologies Used

• HTML5
• CSS3
• JavaScript (ES6)

Project Structure

• index.html: Contains the HTML structure of the application.
• styles.css: Includes all the styling for the button, text, and layout.
• script.js: Handles generating random colors, updating the background, and displaying the current color value.

Notes

• The background color transitions smoothly with a 0.5-second animation for a better visual effect.
• The button has a hover effect that changes its background color for better interactivity.
• Each generated color is displayed in HEX format, and the text updates dynamically to reflect the current color.
• The app is fully responsive and centers the content both vertically and horizontally on any screen size.

Credits

• Developed by: Gabriel