Challenge: "Interactive Color Mixer"

In this challenge, students will create a simple color mixer application that allows users to mix three primary colors (red, green, and blue) by adjusting sliders, and see the resulting color in real-time. The goal is to use the provided sliders to change the intensity of the colors and display the resulting RGB color code and color block.

Instructions

Objective:
Create a web application where users can adjust sliders to mix red, green, and blue colors. The resulting color should display dynamically along with its corresponding RGB values.

Requirements

1. HTML:

• Create three sliders for adjusting the red, green, and blue values (each slider ranges from 0 to 255).
• Display the RGB values dynamically as users change the sliders.
• Create a color preview box that reflects the mixed color.

2. CSS:

• Style the sliders and color preview box.
• Add some spacing and padding to make the interface user-friendly.

3. JavaScript:

• Store the values of each slider in variables.
• Use event listeners to detect when the sliders change.
• Write a function that updates the background color of the preview box based on the values of the sliders.
• Display the current RGB value below the color preview box.

Stretch Goals (Optional)

• Add a "Reset" button to set the sliders back to default (e.g., all 0s).
• Implement an array of saved colors, allowing users to "save" their favorite color mixes and display them in a list.
• When clicking on a saved color, update the sliders and color preview box to reflect the saved color.