Dynamic Color Switcher

Project Overview

Create an interactive color switcher that demonstrates these JavaScript concepts:

• Event handling with buttons
• DOM manipulation to change styles
• Working with arrays and loops
• Using template literals

What You'll Build

A color switcher application that allows users to:

• Change background colors with buttons
• See the current color code
• Copy color codes to clipboard
• Generate random colors
• Save favorite colors

Step-by-Step Instructions

1. Set Up Your Files

Create these files in your project folder:

2. Create the HTML Structure

Add this basic structure to your index.html:

3. Add the JavaScript

In your script.js file, add the core functionality:

4. Style Your Color Switcher

Add these styles to your styles.css file:

Challenge Yourself!

Once you have the basic functionality working, try these enhancements:

• Add color sliders for RGB values
• Implement color schemes (complementary, analogous, etc.)
• Add color name suggestions
• Save color palettes to localStorage
• Add a color history feature