Author: @finnhodgkin
Maintainer: @finnhodgkin
$ git clone https://github.com/foundersandcoders/morning-challenge-traffic-lights.git
Open the folder in your favourite text editor.
For instant feedback on all your changes run live server :sparkles:
$ npm i && npm run live
JavaScript's functions are "first-class". This means that they are treated exactly the same as any other type of data (eg, strings, numbers, arrays ect). This allows them to be assigned to variables, stored in arrays, passed to functions as arguments or returned from functions. In JavaScript this means that functions can be passed around, and are only ever invoked when followed by parens ()
.
Here are some examples of how functions can be used.
function greeting(firstName, lastName) {
alert('Hello ' + firstName + ' ' + lastName);
}
greeting('Bob', 'Belcher'); // Hello Bob Belcher
var greeting = function(firstName, lastName) {
alert('Hello ' + firstName + ' ' + lastName);
}
greeting('Tina', 'Belcher'); // Hello Tina Belcher
function greeting(p1, p2) {
return "Hello " + p1 + " and " + p2
}
function firstBelcher() {
return "Bob Belcher";
}
function secondBelcher() {
return "Tina Belcher";
}
greeting(firstBelcher(), secondBelcher()); // Hello Bob Belcher and Tina Belcher
Your task is to replicate the traffic lights shown above. The only file you'll
need to edit is script.js
. Hopefully the instructional comments will speak for
themselves.
If you get stuck check out the hints branch.
Light up the first traffic light in the following order:
Display the red light for longer:
Loop the light so it plays forever.
Hint: recursion worked for me...
Loop the second light with the following rules:
:vertical_traffic_light: If successful you should see something like the gif above. :tada:
Check out the two solution branches (solution and solution-fun) for two complete examples