Task: Responsive Color


Webpage, JavaScript, Frontend


Responsiveness is a must-have in modern days of web technology. There are so many different devices with different size. Adopting them all takes a lot of work. So let's do that!


Create a webpage that respond to screen dimension change and adjust its background color.

Given a list of [width, height, color] representing all the possible dimensions and a corresponding background color. Make a simple webpage that changes its background color based on the size of the screen.

When choosing from which color to use, choose the dimension that covers the current screen. If there's multiple, choose the first one in the list. If there is no dimension that covers the current screen, keep a white background.


configSource: { "jsonFile": "./config.json" }

  [375, 812, "blue"],
  [1024, 768, "#ccc"]

Please ignore build in package.json. We will run start command in package.json that would run a localhost website on port 8000. We will run tests against the website.


With the example config above, the end result would be:

Whitebackground when 1365x978 Example 1

Grey on an iPhone 6 Example 2

Blue background on an iPhone X Example 3


Be aware of the chrome debugging emulator issue with the viewpoint meta tag.

Get started
My Submissions

Submit to see your result!


Nobody here yet, solve it now to get on the board!