codercreative / color-scheme-picker

Scrimba Solo Project - Using the The Color API, built a color scheme picker from scratch

Home Page:https://color-scheme-chris.netlify.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Color Scheme Picker

screenshot

How does the app work?

  • User picks a "seed color", selects a color scheme (monochrome, complement, etc.), clicks a button to get the color scheme and the colors display in a column - including the HEX values for each color.

Process

  • Consult Figma design files
  • Create draft of README file
  • Create .gitignore file and check that meta tag is included
  • Create Github repository
  • Work on HTML, CSS and JS files
  • Check final code and accessibility
  • Finalize README file
  • Publish live URL

Considerations along the way

  • Made sure a sample color scheme is displayed on page load
  • Added a clipboard functionality
  • Made the app responsive
  • Added light-dark mode

Resources:

How to create a dropdown list

Copy text to clipboard

Light/Dark Mode toggle

How to create a dark/light theme toggle

How to make tooltips with only CSS

tippy.js

sweet alert

W3 Schools: How to - Snackbar / Toast

MDN: ARIA: checkbox role

Accessible toggle buttons

About

Scrimba Solo Project - Using the The Color API, built a color scheme picker from scratch

https://color-scheme-chris.netlify.app/


Languages

Language:CSS 51.3%Language:HTML 27.3%Language:JavaScript 21.4%