Random color palette generator web app

252 developers have joined this project.

What you will practice

You'll practice fetching data from the API, copying data to clipboard, keyboard event listeners. You'll learn how to use an API in a web app that can be applied to real-world products (i.e. streaming services like Youtube, Netflix uses APIs to distribute content).

Introduction

In today's world, design is everything. Choosing the right color palette for a product or website will help evoke different emotions you'd like your audience to experience. You'll build a full-fledged random color palette generator web app using Colormind API, which can be used for both web apps and mobile apps.

Requirements

Set up a React App(vanilla JS or your favorite framework works too)
Display a random color palette when a user visits the webpage
Create a button for the user to generate a new color palette
Allow the user to click on the selected color to copy its HEX code
Display a notification when the selected color's HEX code has been copied

For an extra challenge

Allow the user to change the color palette by pressing the 'spacebar'
Allow the user to copy the HEX code of the entire color palette by pressing 'C'

Here is an example UI for this project but you're welcome to make any changes you'd like! 🙂

Suggested Implementation

This project can be implemented as a web app using any front-end stack (e.g. Vanilla JavaScript, React, Angular, Vue.js).

References

Hit a programming wall?
Get help from our mentors

Post request free
First 15 mins free

Suggested languages and frameworks

Angular React JavaScript Vue.js

Difficulty

medium

Contributed by

Rishi Purwar

Full-stack Web Developer

Interested in this project?

Shorten your learning curve with on-demand programming help

The awesome set of verified mentors will provide guidance and mentoring help when you are stuck.

Suresh Atta

Post request free
First 15 mins free

Shorten your learning curve with on-demand programming help

Other recommended projects

medium

Minimalist web analytics tool

You’ll build a simplified web analytics tool with the ability to track views, timestamps, anonymized user agents, and the referrer, and to display this data.

JavaScript

medium

Mortgage calculator web app

Taking out loans and calculating monthly EMI can be confusing and stressful. However, with the help of a mortgage calculator, anyone can easily plan their mortgages out. You will build a mortgage calculator in this project!

JavaScriptReactAngularVue.js

medium

Appointment management system

An appointment management system is a software used by companies and service providers to streamline their service appointments. By using the system, potential customers can know and choose their preferred appointment times according to the companies and service providers' available time slots. This project does not include a B2C marketplace-like interface for customers to browse different service providers.

JavaScriptPHPNode.jsPythonReactRuby on RailsAngularVue.js