https://github.com/moosaharoon6/color-switcher-project-html-css-js

https://github.com/moosaharoon6/color-switcher-project-html-css-js

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/moosaharoon6/color-switcher-project-html-css-js
• Owner: MoosaHaroon6
• Created: 2024-07-17T15:50:42.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-20T14:38:30.000Z (5 months ago)
• Last Synced: 2024-07-20T15:58:03.279Z (5 months ago)
• Language: CSS
• Size: 9.77 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Color Switcher

## Overview

Color Switcher is a web application that allows users to explore and experiment with different colors. It provides a user-friendly interface for selecting preset colors, applying custom colors, and visualizing color changes in real-time.

## Features

- **Preset Color Palette**: Eight predefined colors for quick selection.

- **Custom Color Input**: Apply any color using its hex code.

- **Real-time Background Change**: Instantly see how colors look when applied.

- **Color Information Display**: Shows the current color's hex code.

- **Responsive Design**: Optimized for desktop, tablet, and mobile devices.

- **Reset Functionality**: Easily return to the default state.

## Technologies Used

- HTML5

- CSS3 (with custom properties for theming)

- JavaScript (ES6+)

- Bootstrap 5.3

- Bootstrap Icons

## How to Use

1. **Select a Preset Color**: Click on any of the color buttons in the palette to apply it to the background.

2. **Apply a Custom Color**: Enter a valid hex color code (e.g., #FF5733) in the input field at the bottom and click "Go".

3. **Reset**: Click the reset icon in the top right corner to return to the default state.