A React-based interactive color clicking game with dynamic color logging.
Color Clicker is a small interactive web application built with React that allows users to click colored squares to generate random colors. Each clicked color is logged and displayed with its corresponding hex value. The app demonstrates proficiency in React state management, component design, and front-end UI layout.
- Frontend: React, JSX, CSS
- State Management: React
useStatehooks - Version Control: Git & GitHub
- Interactive Color Squares: Click any square to generate a new random color.
- Color Logging: Every clicked color is displayed below with its hex code.
- Responsive UI: Layout is centered both vertically and horizontally using flexbox.
- Dynamic Color Display: Real-time updates to the squares and the log.
- Optional Color Name Lookup: Hex values can be mapped to human-readable color names.
Building this project helped me strengthen my skills in:
- React Fundamentals – Components, props, state, and event handling.
- Front-End Layout – Using CSS flexbox to center content and align elements.
- Dynamic UI Updates – Real-time color changes and logging.
- Problem Solving – Handling layout bugs, off-center elements, and dynamic data.
- Project Structuring – Creating modular, reusable components (
ColorBox) and maintaining clean code.
Clone the repository:
git clone https://github.com/Ted-Voo/Color-Clicker.git
cd Color-Clicker
npm install
npm start