Coding for GUIs (Javascript edition) 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.
![Coding for GUIs (Javascript edition) course Image](/media/5ggnt1iv/cfg_index-page_thumbnail.png?anchor=center&mode=crop&width=480&height=301&rnd=132634007864730000)
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.
Year band: 7-8
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
pH scale
Times table generator
Lesson 2: Controls for input
TWO/THREE 45-MINUTE PERIODS![](/media/grapntzr/cfg_index-page_lesson-2.jpg)
Image credit:
mohamed Hassan/ Pixabay
- 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.
Videos in this lesson
Wi-Fi Checker
Password generator
Celsius converter
Exchange rate overview
Currency converter
Lesson 3: Timers and triggers
TWO/THREE 45-MINUTE PERIODS![](/media/xuibxpsu/cfg_index-page_lesson-3.jpg)
Image credit:
Zlouiemark45546/ Wikimedia Commons, CC BY-SA 4.0
- 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?
Videos in this lesson
Digital clock
Higher or lower
Lesson 4: Flipping images
TWO/THREE 45-MINUTE PERIODS![](/media/klze0j4q/cfg_index-page_lesson-4.jpg)
Image credit:
Riho Kroll/ Unsplash photo library
- 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.
Videos in this lesson
Dice roll
How much sugar?
Lesson 5: GUIfy my program!
TWO/THREE 45-MINUTE PERIODS![](/media/q4dhvbwu/cfg_index-page_lesson-5.jpg)
Image credit:
ICMA Photos/ Wikimedia Commons, CC BY-SA 2.0
- 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
Videos in this lesson
Heads or tails
Final project: A complete application with GUI
TWO/THREE 45-MINUTE PERIODS![](/media/qqzmzzhu/cfg_index-page_final-project.jpg)
Image credit:
Clker-Free-Vector-Images/ Pixabay
- 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.