https://github.com/pktcodes/color-generator-react-project-v2

Color Generator Project using React
https://github.com/pktcodes/color-generator-react-project-v2

clipboard-api color-generator css ecmascript html javascript john-smilga nanoid react react-hooks react-toastify usestate valuesjs vite

Last synced: 6 days ago
JSON representation

Color Generator Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/color-generator-react-project-v2
• Owner: pktcodes
• Created: 2023-08-04T03:56:19.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-06T03:05:28.000Z (over 1 year ago)
• Last Synced: 2024-08-12T23:21:24.488Z (3 months ago)
• Topics: clipboard-api, color-generator, css, ecmascript, html, javascript, john-smilga, nanoid, react, react-hooks, react-toastify, usestate, valuesjs, vite
• Language: CSS
• Homepage: https://react-color-generator-v2-prod.netlify.app
• Size: 29.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://www.npmjs.com/package/nanoid)

[React Toastify](https://www.npmjs.com/package/react-toastify)

[Values JS](https://github.com/noeldelgado/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._