This tutorial was written for a small class of pupils with some previous exposure to HTML & CSS but this doesn't nessessary require any previous knowledge or experience with those. This content can be used solo but is intented to be done with a class in a code along style.
Using a boilerplate, we'll create a traffic light that can be manually controlled by clicking each light on & off, add a reset button to turn all the lights off and finally automate the light.
The aim of this content is to introduce JavaScript and cover a variety of basics including;
- Using HTML & CSS to add the traffic lights & buttons.
- Getting elements from the DOM & storing them as variables.
- Adding EventListeners.
- Using
if
statements &for
loops. - Creating functions and reusing them.
- Using
setInterval
.