Pixel editor - iGenius Frontend task

Hey canditate!

Welcome to our little test project! 🚀

We hope that you will feel challenged by this task. Do not worry about not being able to finish all the features, but try to manage the time at your disposal in a smart way.

Design

Features specs

Color picker slider 🎨

The slider should present the entire RGB scale of colors, and the user should be able to move the slider to change the select color value.
On the upper box, the selected color needs to be shown as its hexadecimal representation.

Painting grid 📐

The grid on the right needs to respond to user click on a single cell and paint it with the current selected color on the slider.
The painting grid size is fixed, when the cell number increases the actual dimension of the cell shrinks.
The text input on the top of the painting grid, define the number of cells that needs to be drawn, and by changing one of them, the other will update with the same value (the grid needs to be a square). On dimensions change reset the painting grid.

Art download ⬇

When the user has finished creating his valuable piece of art, he should be allowed to download it as a .png file. The download image dimensions needs to be the same as the painting grid ones.

What you can use 🤨

• You can use ES6, CSS
• You can not use any external libraries 😈
• Feel free to check stuff online but do not copy/paste snippets

How you will be graded ✅

Your final score depends on how many features you implement...

• Color picker slider
  • RGB scale (10 points)
  • Selected color box (5 points)
  • Slider (15 points)
• Painting grid
  • Empty grid (25 points)
  • Paint cell on click (25 points)
  • Dynamic grid size (10 points)
• Art download
  • Download image (5 points)
  • Image size is the same as painting grid (5 points)

...and how well you implement them

• Code quality
  • Clean code
  • Modularity
• UI
  • Follow the design
• Time management
  • It's ok not to finish all the features, we care about your code

How to run 👟

1. we will use the parcel bundler docs
2. yarn or npm i to install deps
3. yarn start or npm start to start the dev server
4. index.js is the entry file

Happy coding!