My checklist
Web Adventures · Week 9

Buttons That Respond

Aim: Use a small piece of JavaScript to make buttons respond to clicks.

New coding words

  1. JavaScript
  2. button
  3. event
  4. click
  5. alert

What the coding words mean

  1. JavaScript: A coding language that can make webpages interactive.
  2. button: A webpage control that a user can select.
  3. event: An action that happens on a webpage, such as a click.
  4. click: An event created when a button or link is selected.
  5. alert: A message from JavaScript. In our Preview, it appears in the “Your webpage says” box.
Code along

Buttons That Respond

This code creates a button that runs a JavaScript function and displays a friendly message box when selected.

Coding space

Edit index.html for your webpage’s content. Use script.js to add actions and make your webpage interactive. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Mini project

Compliment Buttons

This code creates three styled buttons that each run a different JavaScript function and display a different compliment.

Coding space

Edit index.html for your webpage’s content. Use style.css to change its colours, fonts and layout. Use script.js to add actions and make your webpage interactive. Select the tab you want to edit, then select Run my code to see your changes in Preview. Your changes save separately for this activity in this browser.

Tab indents. Esc then Tab leaves the editor. Ctrl/⌘ + Enter runs your code.

PreviewYour webpage
What will you create?

Select Run my code to see your webpage here.

Your mini-project to-do list

0 of 4 completed

Complete these activities in the mini-project editor above. After each change, select Run my code to check your webpage.

Save your finished mini project

Select Download my work and save the file as week_9_compliment_buttons.zip. Extract this .zip file to keep your HTML, CSS and JavaScript files together, then open index.html in a browser to view your webpage.

Debugging detective

Chi Opara, your course guide

Knowledge check

Question 1

Which language makes the buttons interactive?

Question 2

What event happens when a user selects a button?

Your answers are checked in this browser and are not submitted.

How are you getting on so far?

My checklist

Finished Web Adventures Week 9?

Your completion and mood are saved only in this browser.