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.
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.
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.
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.
- You can use ES6, CSS
- You can not use any external libraries 😈
- Feel free to check stuff online but do not copy/paste snippets
- 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)
- 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
- we will use the parcel bundler docs
yarnornpm ito install depsyarn startornpm startto start the dev server- index.js is the entry file