Traffic light

traffic-light.md

Introduction

This question is a multi-part question that gauges how you apply various front-end Javascript and HTML / CSS to solve a given set of problems.

The question is designed to take up the entire interview. There's no expectation that we will finish all of the parts, rather the question builds on itself and we'll get to what we get to.

Step 1: Given the following rough mockup, create a static traffic light in HTML/CSS.

Fig. 1: Basic Traffic Light

Step 2: Add some JavaScript to make the traffic light change active light every second. The lights should change in the order expected from a regular traffic light (top <-> bottom, Red <-> Yellow <-> Green).

Fig. 2: Light changing color

Step 3: Make the active light: stay on red for 3 seconds, yellow for 1 second, and then green for 2 seconds.

BONUS: Have there be two traffic lights on the same page

BONUS: Let's say the two traffic lights represent an intersection. Make sure the traffic lights coordinate to prevent collisions. This means that when the first light is red, the second should be green, and vice-versa. Both lights should be yellow at the same time.