https://github.com/stephenombuya/backgroundcolorchanger
This project is a simple web application that changes the background color to a randomly generated hex code whenever the button is clicked. It’s a fun way to practice JavaScript, CSS3, and HTML5 while learning about DOM manipulation and random color generation.
https://github.com/stephenombuya/backgroundcolorchanger
css3 debugging html5 javascript
Last synced: 8 months ago
JSON representation
This project is a simple web application that changes the background color to a randomly generated hex code whenever the button is clicked. It’s a fun way to practice JavaScript, CSS3, and HTML5 while learning about DOM manipulation and random color generation.
- Host: GitHub
- URL: https://github.com/stephenombuya/backgroundcolorchanger
- Owner: stephenombuya
- License: gpl-3.0
- Created: 2023-08-10T12:30:14.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-10-15T18:28:42.000Z (about 1 year ago)
- Last Synced: 2025-01-13T14:28:45.742Z (9 months ago)
- Topics: css3, debugging, html5, javascript
- Language: CSS
- Homepage:
- Size: 24.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# **Random Background Color Changer**
This project is a simple web application that changes the background color to a randomly generated hex code whenever the button is clicked. It’s a fun way to practice JavaScript, CSS3, and HTML5 while learning about DOM manipulation and random color generation.
## **Demo**
[Live Demo]()
## **Features**
* **Random Color Generation**: Changes the background to a random color each time the button is clicked.
* **Hex Code Display**: Shows the corresponding hex code of the generated background color.
* **Responsive Design**: The page layout adapts to various screen sizes.
## **Preview**
## **Technologies Used**
* **HTML5** for the structure of the page.
* **CSS3** for styling the button and layout.
* **JavaScript** for generating random hex codes and updating the background color.
## **Project Structure**
* **index.html**: The main HTML file containing the layout.
* **styles.css**: Contains the styling for the button and page layout.
* **app.js**: Contains the JavaScript logic for generating random colors and changing the background.
## **Installation**
To run the Random Background Color Changer locally, follow these steps:
1. Clone the repository:
```
git clone https://github.com/stephenombuya/backgroundcolorchanger
```
2. Navigate to the project folder:
```
cd random-background-color-changer
```
3. Open the index.html file in your browser:
```
open index.html
```
Alternatively, you can use a local server:
```
python -m http.server
```
## **Usage**
* **Initial Setup**: When the page loads, a default background color and its corresponding hex code are displayed.
* **Change Color**: Click the "Change Background Color" button to randomly change the background color of the page.
* **View Hex Code**: The hex code of the current background color is displayed under the "Hex Code" section.
## **Future Improvements**
1. Add support for RGB or HSL color formats.
2. Include an option to revert to the previous color.
3. Create a copy-to-clipboard feature for the hex code.
## **Contributing**
Contributions are welcome! Feel free to fork the repository and submit a pull request. Suggestions for improvements are highly appreciated.
## **License**
This project is licensed under the [GNU](https://github.com/stephenombuya/backgroundcolorchanger/) License. See the LICENSE file for more details.