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.
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.
- 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.
- HTML5: For structuring the webpage.
- CSS3: For styling the project layout and elements.
- JavaScript (ES6): For dynamic interactions.
- Font Awesome: For the clipboard icon.
- Clone the repository:
git clone https://github.com/codEdu-Collective/js-dom-random-background.git
- Navigate to the project folder and open
index.html
in your browser. - Use the color picker or the buttons to change the background color dynamically.
- Click the clipboard icon to copy the color code.
This project helped me:
- Understand DOM manipulation using JavaScript.
- Work with event listeners like
click
andmouseover
. - Use
input
elements for color picking and integrate them with JavaScript. - Implement a clipboard copy functionality.
Thanks to resources like:
- MDN Web Docs for guidance on JavaScript DOM methods.
- Font Awesome for providing free icons.