/color-generator-react-project-v2

Color Generator Project using React

Primary LanguageCSS

Color Generator 🌈

PROD [Live] : https://react-color-generator-v2-prod.netlify.app/

Color Generator consists of a straightforward user interface where there is a

  • List of tints and shades of color for a given input along with the page title Color Generator.
  • The default color in the input is set to orange #f15025 when the page loads.
  • User can input the color value either using the color picker interface or providing the valid hex value.
  • If a color is not found for the given input, it shows the toast Error message.
  • Each single color card has Background color, Weight, Hex Value of the color along with the functionality of copying the Hex value of the color on click of that specific card showing the toast message Copied to clipboard.
  • Colors are handled by the values.js, toast messages are implemented using React Toastify and styles are handled by index.css
  • To run the project locally, clone the repo, npm install to install the dependencies, and npm run dev to start up the development server on default port 5173.

Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState

Packages

Nano ID

React Toastify

Values JS

Deployment / Hosting

Netlify

Note: I have developed this project ~ [10] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga.