🎨 React Background Switcher

🎯 Project Goal

This mini-project is a study in React Event Handling.

The goal was to build a simple, responsive interface that allows users to dynamically manipulate the DOM (Document Object Model) properties—specifically the background color—in real-time using React state variables, rather than direct DOM manipulation.

🔗 Live Demo

Try the Background Changer

⚡ Features

• Dynamic Color Palette: A selection of curated colors (Red, Green, Blue, Olive, Gray, etc.) presented as a button bar.
• Instant State Update: The background changes immediately upon user interaction without page reloads.
• Tailwind Styling: Buttons are styled for distinct visibility and hover effects using utility classes.

🧠 Technical Learnings

Despite its simplicity, this project reinforced core React concepts:

1. State Management (useState): How to hold the current color value in memory.
2. Event Listeners: Attaching onClick handlers to buttons to trigger state changes.
3. Inline Styling vs. Classes: Passing the state variable directly to the style property of the main container to effect the change.

🛠️ Tech Stack

• Library: React.js
• Styling: Tailwind CSS

🏃‍♂️ How to Run Locally

1. Clone the repository:

   git clone https://github.com/tsdebug/react-bg-changer

2. Install dependencies:

   npm install

3. Start the app:

   npm run dev

---

A simple experiment in interactivity.