An interactive and simple web application that allows users to dynamically change the background color using a color input, hex code, or quick color buttons. Perfect for experimenting with color palettes or learning web development basics.
- 🎨 Real-time Background Customization: Change the background using a color picker, predefined colors, or hex codes.
- 🔢 Hex Code Support: Enter hex color codes to match your exact preferences.
- 🎛️ Quick Color Buttons: Instantly apply popular colors with a single click.
- 🔄 Reset Functionality: Easily reset the background to the default color.
- 📱 Responsive Design: Works seamlessly across all device sizes.
- HTML5: For structuring the application.
- CSS3: For styling and ensuring responsiveness.
- JavaScript (ES6): For interactivity and dynamic functionality.
- A modern web browser (e.g., Chrome, Firefox, Edge).
-
Clone the repository:
(https://github.com/SamuelMarete/Javascript-Day3_colorPicker.git)
-
Navigate to the project directory:
cd color-picker-app -
Open the
index.htmlfile in your browser.
color-picker-app/
├── index.html # Main HTML file
├── style.css # CSS file for styling
├── script.js # JavaScript file for interactivity
└── README.md # Project documentation
- Select a Color: Use the color picker to select a background color.
- Enter a Hex Code: Type a valid hex color code (e.g.,
#FF5733) in the input box. - Quick Colors: Click on the predefined color buttons to apply instantly.
- Reset Background: Click the "Reset Background" button to return to the default color.
Contributions are welcome! Here's how you can help:
- Fork the repository.
- Create a feature branch:
git checkout -b feature-name. - Commit your changes:
git commit -m 'Add a new feature'. - Push to the branch:
git push origin feature-name. - Open a Pull Request.
This project is licensed under the MIT License. See the LICENSE file for more details.
(https://github.com/SamuelMarete)
Web Developer passionate about creating user-friendly applications.
Color Picker App Live Demo
If you have any feedback or suggestions, feel free to open an issue or reach out via email@example.com.
