Create Pixel Art Grid | Frontend Coding Challenge | DevKode DOM Challenge

HTML/CSS/JavaScript React Beginner

749

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

Devtools Tech Pixel Art

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