Create Pixel Art Grid | Frontend Coding Challenge | DevKode DOM Challenge
@Devtools Tech

HTML/CSS/JavaScriptReactBeginner
208
Do you see value in our efforts?

Devtools Tech is a free platform for Frontend Engineers. It takes a lot of time, effort, and finanical resources to keep the platform running. If you see any value in our work and would like to support us then you can do using the following options.

InternationalDomestic

In this challenge, candidate needs to create a Pixel Art Grid.

Specifications

  1. Default State should be an empty grid of NxM.

Default Pixel Art Grid

  1. Clicking on any cell should fill it. (Feel free to choose color)

Pixel Art Grid onClick

  1. One should be able to drag over multiple cells to fill them.

Pixel Art Grid Drag

  1. 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