Color Scheme Generator - A Scrimba FEWD Project

This is my solution to the Color Scheme Generator solo project, a module 9 project from the Scrimba Frontend Developer Career Path.

A minimilist color palette generator that uses the browser's built-in color picker and The Color API to generate a scheme of 5 colors, according to the user selected color harmony mode.

Table of contents

• Overview
  • Project requirements
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

Project requirements

Users should be able to:

• Choose "seed color" using the browser's built-in color picker
• Chose a color scheme mode using a select drop-down input
• Click on the "Get color scheme" button to generate a color scheme
• See 5 colors and their associated hex codes based on the selected scheme

Project stretch goal:

• Allow user to click on hex code to copy to clipboard

Personal enhancements:

• Customized design with distinct mobile and desktop layouts
• Added accessibility enhancements to allow color code copy by keyboard
• Dynamic contrast color for Color result bar metadata (hex code, color name) and copy icon

Screenshot

Links

• Scrimba Scrim
• Live Site

My process

Built with

• Semantic HTML5 markup
• Flexbox
• CSS Grid
• CSS custom properties
• Vanilla JavaScript
• REST API: The Color API

What I learned

For perhaps the first time, I used the URLSearchParams interface within the async function to fetch the desired results from the API. While not necessarily streamlining the code, it may enhance the clarity of the fetch request.

  // build params object
  const params = {
    hex: seedColor,
    mode: colorMode
  };
  // build query string for use in API call
  const queryString = new URLSearchParams(params).toString();
  const url = `https://www.thecolorapi.com/scheme?${queryString}`;

I've used data attributes for other projects in the past, but this is the first time, I believe, I've used them with the .closest method. Getting the syntax exactly right took a bit of trial and error.

function copyHex(e) {
  const hexValue = e.target.closest('[data-hex]').dataset.hex;
  // hanle keyboard and mouse click commands for copy feature
  if (e.key === 'Enter' || e.type === 'click') {
    navigator.clipboard.writeText(hexValue);
    const copyDialog = document.querySelector('#copy-dialog');
        copyDialog.textContent = `${hexValue} copied.`;
        copyDialog.show();
        setTimeout(() => {
          copyDialog.close();
        }, 1500)
  }
}

Useful resources

• The Color API Docs - A simple yet robust API. Easy to get started and a joy to work with.
• Modern CSS Solutions - An amazing resource from Stephanie Eckles I keep coming back to.

Author

• Website - mattpahuta.com
• LinkedIn - LinkedIn