Scribd
Upload
1 views6 pages

Color App

The document outlines the development of a color generator app that allows users to input RGB, hex, or text to generate color palettes, which is useful for web developers. It includes a problem statement, breakdown of tasks, and prerequisites for setting up the development environment, either locally or online. Specific tasks include creating a header, reusable components, converting RGB to hex, and implementing a clipboard copy feature.

Uploaded by

jj491bendreacc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
1 views6 pages

Color App

The document outlines the development of a color generator app that allows users to input RGB, hex, or text to generate color palettes, which is useful for web developers. It includes a problem statement, breakdown of tasks, and prerequisites for setting up the development environment, either locally or online. Specific tasks include creating a header, reusable components, converting RGB to hex, and implementing a clipboard copy feature.

Uploaded by

jj491bendreacc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Color

Practice Problems
Assignment Questions

Assignment Questions
Colour Generator
Here we plan to build an app that generates colour in all shades. The user can add RGB, hx or simply text.
The user can view all the colour palettes related to that. This is a helpful tool for developers while building
websites and choosing the colour palette.

Problem Statement
As said here, we plan to build an app that generates colour in all shades. The user can add RGB, hex or
simply text. The user can view all the colour palettes related to that. This is a helpful tool for developers
while building websites and choosing the colour palette.

Your task is to go through the problem statement and build the required features of the application.

Problem Breakdown
We will create the colour palette app using the following library:

https: //noeldelgado.github.io/values.js/

You can use any style, but it should have a decent look as per the template images. You are free to use
react material as well for icons and styling.

Pre-requisites
Kindly ensure you have done signup and logged in to codesandbox if you wish to code online; otherwise,
install Git, Nodejs, and NPM in your system before you kickstart development.

For your local development:

After installing the pre-requisite dependencies mentioned above, you need to do the following
You need download the zip version of the cod
Once you have downloaded it, unzip it to any path of your choice, you need to run the command npm
install on the project folder's terminal to install all the project dependencies
After installing the project dependencies, you need to run the command npm start on your project
folder's terminal to start the development server.
The app will now be hosted on the URL https://localhost:3000. You can now start coding your
application.

For online coding you need to fork and start coding.

You are free to install and use any other dependencies over and above the ones installed above to
ensure the completion of your tasks.

Assignment Questions

Here is a list of tasks for the above project:

Template 1

1. Create header and handle submit

2. Create a common reusable component

3. Show result

4. RGB to Hex

5. Copy to clipboard

Story 1:

The first task is to create the header, as shown below. The user can add the in hex, and when the user
submits the colour, a colour palette is returned. Save this response in the console. Use the following
library to get shades of colour.

https://noeldelgado.github.io/values.js/

Story 2:

Create a common component Single Colour which will have the following props passed as value

Weight of the colour: shade of the colour

Key-value

hexColor

Story 3:

Use the common component single colour and pass it in your home page with all the params.
Assignment Questions

Story 4:

The user can add rgb value or a simple text value which can be converted to hex value. Write the logic for
it.

Story 5:

In this task, you need to create a functionality which will copy the hex value to clipboard when the user
clicks on any colour.

Color

Practice Problems
Assignment Solutions

Assignment Solutions

Quiz app : Answer

Github link : https://github.com/Utkarshini12/Color

You might also like