Random Background Color Generator

A fun and interactive project that lets users change the background color of the page using buttons and a color picker. This project is great for learning and practicing JavaScript, HTML, and CSS.

Live Demo

Table of Contents

• About the Project
• Features
• Technologies Used
• How to Use
• What I Learned
• Acknowledgments

About the Project

This project allows users to interact with the webpage to dynamically change its background color. It includes a color picker, buttons for random color changes, and a clipboard feature to copy the color code.

Features

• Random Color Generator: Generates random background colors on button click.
• Mouseover Interaction: Changes the background color when the mouse hovers over specific buttons.
• Color Picker Input: Lets users manually pick a color for the background.
• Copy to Clipboard: Copies the generated color code to the clipboard.

Technologies Used

• HTML5: For structuring the webpage.
• CSS3: For styling the project layout and elements.
• JavaScript (ES6): For dynamic interactions.
• Font Awesome: For the clipboard icon.

How to Use

1. Clone the repository:

   git clone https://github.com/codEdu-Collective/js-dom-random-background.git

2. Navigate to the project folder and open index.html in your browser.
3. Use the color picker or the buttons to change the background color dynamically.
4. Click the clipboard icon to copy the color code.

What I Learned

This project helped me:

• Understand DOM manipulation using JavaScript.
• Work with event listeners like click and mouseover.
• Use input elements for color picking and integrate them with JavaScript.
• Implement a clipboard copy functionality.

Acknowledgments

Thanks to resources like:

• MDN Web Docs for guidance on JavaScript DOM methods.
• Font Awesome for providing free icons.