/colorTheme

This application allows the user to generate a scheme of colors based on an initial color seed of choice and a scheme mode.

Primary LanguageJavaScript

Table of Contents

Description

This application allows the user to generate a scheme of colors based on an initial color seed of choice and a scheme mode. Once the user choices are completed and the 'Get color scheme' button is clicked, the application will perform a fetch request to The Color API and retrieve a collection of 5 colors. Once the color scheme is generated, the user will be able to copy each color's hexadecimal code to the clipboard by clicking on the color strip or the hexadecimal code displayed at the bottom.

Installation

No installation is needed. This application is run in a live webpage.

Usage

To use this application, go to the deployed webpage by followig this link: Visit the deployed page

Image of the Landing Page

Once in the landing page, click on the color picker at the top left to pick a color seed.

Image of color picker

Next, chose a color scheme mode from the dropdown list.

Image of scheme modes from a dropdown list

Click on the 'Get color scheme' button to generate the color scheme based on your choice of seed and scheme mode.

Image of a generated color scheme

Click on the color rectangle or on the hexadecimal code shown below each color strip to copy the hexadecimal code to your clipboard. You are ready now to use it in your code!

Image of alert after copying hexadecimal code to your clipboard

Credits

Third-party assets:

Reference material:

GitHub

If you want to know more details, feel free to visit the repo

Features

  • HTML
  • JavaScript:
    • Variables
    • Arrays
    • Objects
    • EventListeners
    • For Of Loops
    • Fetch
    • API
    • Promises
    • Navigator.Clipboard.writeText()
    • Template literals