Create Pixel Art Grid | Frontend Coding Challenge | DevKode DOM Challenge
@Devtools Tech
In this challenge, candidate needs to create a Pixel Art Grid.
Specifications
- Default State should be an empty grid of NxM.
- Clicking on any cell should fill it. (Feel free to choose color)
- One should be able to drag over multiple cells to fill them.
- Clicking on
Clear
CTA should reset the grid to original default state.
Demo
Code Templates
HTML
<!DOCTYPE html>
<html>
<head>
<title>Devtools Tech Sandbox | Pixel Art Challenge</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="grid"></div>
// do not remove
<script src="./index.js"></script>
</body>
</html>
JavaScript
/*
* Creates pixel art grid
* @param el DOM Element
* @param rows Number of rows
* @param rows Number of cols
*/
function PixelArt(el, rows, cols) {
// write logic to create pixel art grid.
}
PixelArt('#grid', 20, 20);
Submission
Please start the timer before starting and finish your solution within 90 mins. Share your solution with us on Twitter or LinkedIn.
This question is part of DevKode Coding Challenges. Find the original challenge here
HTML/CSS/JavaScript
HTML/CSS/JavaScript
React