imjamesdotme / learn-javascript

Build a working traffic light with this JavaScript tutorial for beginners

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Learn JavaScript with traffic lights

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.

About

Build a working traffic light with this JavaScript tutorial for beginners


Languages

Language:JavaScript 39.7%Language:CSS 33.1%Language:HTML 27.3%