Color Scheme Picker

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