Giter VIP home page Giter VIP logo

johndev19 / color-switcher Goto Github PK

View Code? Open in Web Editor NEW

This project forked from moosaharoon6/color-switcher-project-html-css-js

1.0 0.0 0.0 9 KB

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.

JavaScript 32.00% CSS 35.47% HTML 32.53%
css html javascript

color-switcher's Introduction

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.

color-switcher's People

Contributors

johndev19 avatar moosaharoon6 avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.