gyanl/chromagen

Random pretty color generator

chromagen's Issues

Create a gradient generator

Should have :
-A way to generate a gradient using two randomly generated colors (from first to second color)
-A rotate button to rotate the orientation of the gradient cyclically from right-->left to bottom-->top to left-->right to top-->bottom (can be done by changing the "to x" parameter in the CSS).
-A copy CSS button that copies the css code for the gradient in the format
background: #4DA0B0; /* fallback for old browsers /
background: -webkit-linear-gradient(to left, #4DA0B0 , #D39D38); / Chrome 10-25, Safari 5.1-6 /
background: linear-gradient(to left, #4DA0B0 , #D39D38); / W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

Add keyboard shortcuts

Using keyboard shortcuts for generating a new random color, copying the current color, and copying all the colors. There are existing functions being called on the button clicks, they can be called on keypress.

Color change animation is choppy on mobile

See how it can be made smoother - possibly by reducing the animation duration for mobile, or somehow enabling hardware acceleration?

Using copy shortcut deselects color circle

Minor issue, but ideally circle should stay selected/enlarged.

Create a "Copy All" button

The copy all button should copy all of the currently generated hex codes, separated by spaces or commas.

Switch between solid color and gradient generator.

Create UI to switch between solid color generator (currently index.html) and gradient generator (colorGradient.html)

Use arrow keys to toggle colors

User should be able to toggle between different colors using left and right arrow keys.

Some other key shortcuts have already been implemented. Reference: #11
CONTRIBUTING.md

copy from keyboard does not work

This stackoverflow thread explains that a copy to the clipboard must be from a user. In other words, the current method for copying (invoking toast(color) ) is insufficient.

I have implemented a fix to this as well as added navigation between colors with the left and right arrow keys.

Improve gradient generator UI

Find a more elegant way to display gradients and maybe change the copy/copy all text to "CSS copied". Needs some thought.

Create an option to use RGB or HSL instead of Hex codes.

Currently users can only copy the color as a hex code, but sometimes it's useful to have rgb or hsl values for web development work, so there could be a dropdown that allows you to change between modes.

For eg. #0946f0 is equivalent to rgb(9, 70, 240) & hsl(224, 93%, 49%)

Improve Mobile layout

Make the page scrollable (issue arises when you generate a couple of gradients and then copy all - text goes out of the screen)

Also make the buttons and text fit inside the white rectangle - it's currently overflowing on mobile.