In this assignment you are requested to create a React color picker component.
You can use any mix of HTML, JavaScript, CSS, Bootstrap, SASS, Redux/Mobx, to complete this assignment. You must, however, use React. We are looking at supporting other frontend frameworks like Angular and Vue, but they are not currently supported. Happy coding!
You are requested to fulfill the following user stories:
User Story #1: I can see a 100x100px element with a corresponding
id="picker".The element will show a gradient going from black to the color of your choice.
User Story #2: I can see a 50x100px element with a corresponding
id="swatch". User Story #3: I can see an input with a corresponding id="hslString".
User Story #4: When I click anywhere inside the
#picker element, the #swatch element background is updated and shows the clicked color. User Story #5: When I click anywhere inside the
#picker element, the #hslString input is updated and show the HSL string of the clicked color. Optional Bonus (you do not need to make this test pass): When I hover over the color picker a zoomed version of the current hover spot is following the cursor .
Optional Bonus (you do not need to make this test pass): clicking the #hslString the value of the input circles between different color strings (i.e RGB -> HSL -> HEX)
Please use Github to submit your project. Use github pages to host it. Commit often and show a proper product source control methodology (for instance a branch per feature). Including meaningful commit messages and and explanatory readme file.
Timeline
You have 24 hours to submit whatever you feel comfortable with.