Create a Color Spotter Game | Frontend Coding Challenge | DevKode DOM Challenge | JavaScript | HTML | CSS | ReactJS
@Devtools Tech

HTML/CSS/JavaScriptReactBeginner
160
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, the candidate needs to create a color spotter game where you have to identify the cell that is different from the rest.

  • First, you start out with 4x4 grid, and click on the one where the shade looks slightly different.

  • Each time you pick the correct cell, a new set of NxN grid is shown and you must once again pick the cell that stands out to you as different.

Functional Specs

  • Grid should be NxN and should starts from 4x4.
  • In case of right answer, increment score by 1 and increase the size of grid by 1.
  • In case of wrong answer reset score and grid to default and shake the grid for 800ms.

Mockups

Color Spotter Screen 1

Color Spotter Screen 2

Color Spotter Screen 3

Color Spotter Screen 4

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