Skip to main content
Skip to main content

Coding for GUIs (JavaScript edition)
Lesson 2: Controls for input

Years 5-6; 7-8

This is the second in a series of lessons to incorporate graphical user interfaces (GUIs) into your general-purpose programming. The series follows on from the Visual To Text Coding lesson series.

Included videos can be used by a beginner teacher and/or students to see how to code each of the simple programs step by step with HTML, CSS and JavaScript.

This lesson may take two to three 45-minute periods. It introduces buttons and other controls for data input, such as range sliders and updowns.

 


     
Next lesson    


Learning hook

As part of a graphical user interface (GUI), input controls are the different elements available to your user for providing information and issuing commands, such as buttons, text fields or checkboxes.

Students should start by completing the worksheet ‘Choosing the best input control’. Download the worksheet (Word/PDF).

Now, discuss:

  • When do you think a dropdown control is more useful than a text field control, and when is the reverse true?
  • When is a spinner/updown control more useful than a text field control?
  • Some of these controls have been around for decades. What other more recent GUI elements have you seen on websites or apps?

Note: The activity above touches on the first of four principles for good user interface design (distilled from this article hosted by Adobe). For users to feel in control, a GUI should be:

  • easy to navigate (with visual cues that make actions predictable)
  • acknowledging (giving feedback and status)
  • accommodating of different skill levels
  • forgiving (e.g. include an ‘undo’ function)
Decorative image

Image: mohamed Hassan/pixabay

Learning map and outcomes

In this lesson, students will:

  1. access an online programming environment for JavaScript alongside HTML and CSS
  2. upgrade three text applications to GUI applications with input controls
  3. take on a fresh coding challenge to explore and incorporate an input control of their choice.

Learning input

This video introduces the first application for this lesson.

Test out the original JavaScript program without a GUI, so you can see our starting point.

Learning construction

Step 1: Setup

In this course, different environments will be selected based on their suitability for each demonstrated project.

For more on the set-up and environments used, see Lesson 1.

Step 2: Upgrading the wi-fi checker to GUI interface

The video below demonstrates changing the wi-fi checker from a text-only program to one with a GUI.

Let's start with some terms. Try it yourself before checking the solution code.

HTML: HyperText Markup Language
Picture of a skeleton

HTML is one of the earliest languages of the Internet. It defines the structure of a webpage, the static content that will appear on the page when it first loads. It also allows for links. You can make a webpage purely in HTML, but it's hard to make it look good!

You might think of HTML as the skeleton, muscles and nerves of a webpage.

Image: openclipart.org



CSS: Cascading Style Sheets
Picture of a woman's head wearing pink sunglasses

CSS is a script that defines the style of a webpage, allowing for webpages to have interesting and modern look-and-feel: colours, fonts, curved borders, etc.

You might think of CSS as the skin and clothes of a webpage.

Image: Slava_Kovalska/Shutterstock.com



JavaScript
Picture of a brain

JavaScript defines the functionality of a webpage, allowing interactivity beyond just links. It is the only true general purpose programming language of the three. With JavaScript, webpages can have all the functionality of applications; with loops, decisions, functions and data structures.

You might think of JavaScript as the brain of a webpage.

Image: openclipart.org



Step 3: Adding a spinner/updown control

The video below further improves the wi-fi checker by adding a spinner/updown control, which gives an instant response.

Try implementing this improvement before checking the solution code.

Step 4: Second application – temperature converter

The video below demonstrates upgrading a temperature converter to a GUI.

Try coding this GUI version yourself before checking the solution code.

Step 5: Third application – password generator

The video below demonstrates upgrading a password generator application to a GUI.

Try coding this GUI version yourself before checking the solution code.

Challenge

These challenges use the skills covered so far. By writing or modifying their own programs, students have an opportunity to demonstrate ‘application’ and ‘creation’.

  1. The links opposite are a simple text-only application for converting currency. Test it out before continuing.

    Your task is to upgrade this application to have a GUI using HTML, JavaScript and CSS. You can choose the best way to receive the user input and to present the result. (Note: your application does not have to use live currency conversion rates.)

    1. Start by sketching a rough GUI mock-up to show what the user will see and interact with on the webpage. Include text labels and fields, buttons and other input controls.
    2. Develop the webpage from the text-only starting point, using your preferred environment for HTML, CSS and JavaScript.

    Sample solution

    This video gives an overview of one sample solution.


    This video demonstrates building the same solution.

    Could you improve it further by removing the need for pop-up prompts?


Starting point (no GUI):

  1. This challenge is to create a GUI to allow you to experiment with an input control you haven't tried yet. For example, if you are trying radio buttons/option buttons, you might create a simple application that constructs a movie idea as a sentence based on your selections (e.g. gender of main character, setting, genre).

    1. Choose an input control to try. You might want to consider one of the controls from the worksheet at the start of this lesson.
    2. Next, consider what sort of simple application could use that control, and prepare a simple mock-up of the full interface, including title, any images, the input controls and output area.
    3. Develop the webpage from scratch, using your preferred environment for HTML, CSS and JavaScript. Or you can ‘fork’ and modify one of the basic starting points at right.

      HINT: As in the lesson examples, you can use the HTML <input> tag to make your input control(s). The oninput attribute activates your JavaScript function, which will then get the current value from the input control and use it. Alternatively, you can have a <button> tag to make a button with an onclick attribute pointing to your JavaScript function.

      This W3Schools webpage lists the many type attributes that allow different input controls to be made with the <input> tag.

Resources