Keep Calm and Carry On Coding

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 poster in order to change the text of the poster.

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

Your Challenge #1:

Add four more buttons to allow the user to change the background colour of the poster:

• Blue Button: Change colour to: #3050D0
• Yellow Button: Change colour to: #CEC110
• Orange Button: Change colour to: #ED3300
• Red Button: Change colour to: #DB0000

To do so you will need to:

• Add some buttons below the poster
• Ensure the <DIV> tag has an id attribute. e.g. id=”poster”
• Create a new Javascript function called changeColour() and use the follwoing code

  document.getElementById("poster").style.backgroundColor = "#3050D0";

Your Challenge #2:

Add four more buttons to allow the icon used in the poster:

• Crown Button: Change the picture to the crown:
  https://www.101computing.net/wp/wp-content/uploads/Keep-calm-and-carry-on-crown.png
• HTML Button: Change the picture to:
  https://www.101computing.net/wp/wp-content/uploads/html-icon.png
• CSS Button: Change the picture to:
  https://www.101computing.net/wp/wp-content/uploads/css-icon.png
• JavaScript Button: Change the picture to:
  https://www.101computing.net/wp/wp-content/uploads/javascript-icon.png

To do so you will need to:

• Add some buttons below the poster
• Ensure the <IMG> tag has an id attribute. e.g. id=”icon”
• Create a new Javascript function called changeIcon() and use the follwoing code

  document.getElementById("icon").src = "https://www.101computing.net/wp/wp-content/uploads/html-icon.png";

Use your application to recreate the following three posters: