Skip to content

A simple and interactive web application that allows users to select and customize the background color using a color input, hex code, or predefined quick color buttons. Features include real-time updates, reset functionality, and a responsive design. Perfect for experimenting with color palettes or learning basic web development

Notifications You must be signed in to change notification settings

SamuelMarete/Javascript-Day3_colorPicker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Color Picker App

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.


🌟 Features

  • 🎨 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.

🛠️ Technologies Used

  • HTML5: For structuring the application.
  • CSS3: For styling and ensuring responsiveness.
  • JavaScript (ES6): For interactivity and dynamic functionality.

🚀 Getting Started

Prerequisites

  • A modern web browser (e.g., Chrome, Firefox, Edge).

Installation

  1. Clone the repository:

    (https://github.com/SamuelMarete/Javascript-Day3_colorPicker.git)
  2. Navigate to the project directory:

    cd color-picker-app
  3. Open the index.html file in your browser.


📂 Project Structure

color-picker-app/
├── index.html      # Main HTML file
├── style.css       # CSS file for styling
├── script.js       # JavaScript file for interactivity
└── README.md       # Project documentation

✨ How to Use

  1. Select a Color: Use the color picker to select a background color.
  2. Enter a Hex Code: Type a valid hex color code (e.g., #FF5733) in the input box.
  3. Quick Colors: Click on the predefined color buttons to apply instantly.
  4. Reset Background: Click the "Reset Background" button to return to the default color.

📸 Screenshots

image


🤝 Contributing

Contributions are welcome! Here's how you can help:

  1. Fork the repository.
  2. Create a feature branch: git checkout -b feature-name.
  3. Commit your changes: git commit -m 'Add a new feature'.
  4. Push to the branch: git push origin feature-name.
  5. Open a Pull Request.

📝 License

This project is licensed under the MIT License. See the LICENSE file for more details.


👩‍💻 Author

(https://github.com/SamuelMarete)
Web Developer passionate about creating user-friendly applications.


🌐 Live Demo

Color Picker App Live Demo


💬 Feedback

If you have any feedback or suggestions, feel free to open an issue or reach out via email@example.com.


About

A simple and interactive web application that allows users to select and customize the background color using a color input, hex code, or predefined quick color buttons. Features include real-time updates, reset functionality, and a responsive design. Perfect for experimenting with color palettes or learning basic web development

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published