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 - we will use the parcel bundler docs
yarn
ornpm i
to install depsyarn start
ornpm start
to start the dev server- index.js is the entry file