Mind the Gap

When your browser displays a webpage on screen it uses 3 different programming languages called HTML, CSS and JavaScript. We call the combination of these three languages “client-side web technologies”.

Each of the three language has its own syntax and purpose:

• HTML uses <tags> and its purpose is to add content on the page such as text, pictures, and video clips.
• CSS is used to customise the look and feel of the page by defining the position of each element on the page, defining the layout of the page as well as formatting text, pictures and other components on the page.
• JavaScript is used to add user interaction to the page. JavaScript can be linked to HTML tags through various events such as the onClick event of a button.

Each of these languages are based on web standards defined by the World Wide Web Consortium W3C. As a consequence these languages are recognised by all the main web-browsers including Google Chrome, Microsoft Edge, Modzilla Firefox, Safari, etc. on various platforms (Windows, MacOs, Linux, Android etc.)

The Following codepen provides a clear demonstration of the syntax and purpose of HTML, CSS and JavaScript and shows how JavaScript can interact with various HTML tags.

On this codepen you can click the button located below the “Mind the Gap” sign in order to change the text of the sign.

See the Pen Mind the Gap by 101 Computing (@101Computing) on CodePen.

Your Challenge:

Add one more button to allow the user to change the background colour of the both sections of the logo (circle and label).

To do so you will need to:

• Add a button below the poster
• Create a new Javascript function called changeColours() and add Javascript code to prompt the user to enter two colour codes (hexadecimal format: e.g. #00FF00). Use some of the code as provided below to change the colour of the red circle or of the blue label.

  document.getElementById("red-circle").style.borderColor = "#FFFF00";
  document.getElementById("blue-label").style.backgroundColor = "#00FF00";

You can then use your web application to re-create the following signs: