Task: Responsive Color

Tags

Webpage, JavaScript, Frontend

Description

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!

Specification

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.

Configuration

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.

Example

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

Note

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

Instructions
Get started
My Submissions

Submit to see your result!

Leaderboard

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