Coding for GUIs (JavaScript edition)
Index page
About this course
This lesson sequence provides step-by-step video tutorials and challenges to incorporate Graphical User Interfaces (GUIs) into your General Purpose Programming. It 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.
Learning hooks at the start of each lesson encourage students to explore principles of User Experience and User Interface design.
This resource is most suitable if:
- you have learned some basics of JavaScript programming, especially through the previous lesson series,
- you have a little familiarity with HTML,
- you benefit from slow-paced, step-by-step video tutorials
Getting ready
This video gives you a taster of the projects covered in this course.
Use this video to find out the key skills brought over from the previous course.
Lesson 1: Structure, style and function
Two/three 45-minute periods
- Discover how HTML and CSS work together with JavaScript to make GUIs on webpages.
- Create a colourful pH scale using HTML and CSS alone, without JavaScript.
- Create your first interactive JavaScript program that looks good: a times table generator.
- OPTIONAL: Challenge yourself to convert another simple JavaScript program to have attractive output on a webpage.
Videos in this lesson:
Lesson 2: Controls for input
Two/three 45-minute periods
- Begin incorporating buttons and other GUI controls like range sliders to trigger JavaScript code.
- Create webpage-based applications to:
- respond to numbers typed in or selected with an updown control
- generate passwords
- convert temperatures and currencies
- OPTIONAL: Challenge yourself to make use of another GUI control in your own application.
Image credit: mohamed Hassan/ Pixabay
Videos in this lesson:
Lesson 3: Timers and triggers
Two/three 45-minute periods
- Begin incorporating timers to update the display of elements and trigger code.
- Create an accurate digital clock.
- Bring the classic higher-or-lower game to life with a full GUI
- OPTIONAL: Challenge yourself to make a simple clicker game – how many times can you click the button in a time limit you set?
Image credit: Zlouiemark45546/ Wikimedia Commons, CC BY-SA 4.0
Videos in this lesson:
Lesson 4: Flipping images
Two/three 45-minute periods
- Make your GUIs more dynamic by coding images on the page to change.
- Create an interactive dice roll simulation with dice face images that change when you roll.
- Create a dynamic data visualisation to show teaspoons of sugar in various drinks.
- OPTIONAL: Challenge yourself to create your own dynamic data visualisation.
Image credit: Riho Kroll/ Unsplash photo library
Videos in this lesson:
Dice roll
How much sugar: Overview
How much sugar: From the ground up
Lesson 5: GUIfy my program!
Two/three 45-minute periods
- Take the classic Heads or tails program from the original Visual To Text Coding lesson sequence and give it an animated GUI.
- Test and analyse the code for two other classic programs converted to GUIs:
- Heads or tails
- Magic 8 ball
Image credit: ICMA Photos/ Wikimedia Commons, CC BY-SA 2.0
Videos in this lesson:
Heads or tails: Stop coin flipping
Project: A complete application with GUI
Minimum three 45-minute periods
- Choose one of two defined problems or pick your own, and make a specific list of requirements for the solution.
- Design both the GUI and main algorithm(s) for the application.
- Develop the HTML, CSS and JavaScript to bring the application to reality.
Image credit: Clker-Free-Vector-Images/ Pixabay
Creative Commons Attribution 4.0, unless otherwise indicated.