Coding for GUIs (Javascript edition) course

Image credit:
Alvy16/ Wikimedia Commons, CC BY 4.0

• 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.

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.

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?

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.

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

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.