Chris Stegeman | Jan 31, 2023

js17 | stopwatch

js17 | stopwatch

Voorkennis:

  • JS basics

Doelen:

  • JS Interval leren gebruiken
  • Globale variabelen toepassen

Bekijk de basis opzet van de stopwatch std.stegion.nl.

opdracht

  • neem het de basis functionaliteit van de tutorial over en test het
  • maak een "start"-button aan en koppel die aan een function fStart() (test deze met een console.log())
  • laat mijnInterval als globale variabel staan, plaats setInterval() in fStart()
  • maak een "reset"-button en function aan die de seconden weer op 0 zet en de interval stopt
  • Zorg dat de tijd in minuten, seconden en honderste-seconden wordt weergegeven
    • zet de interval tijd op 10ms zodat je de honderste-seconden telt
    • als de seconden > 59 worden, moet de weer op 00 staan en de minuten op 01
    • als seconden of minuten < 9 zijn moet er een 0 voor staan: 08, 09, 10, 11..
  • voeg CSS toe om het mooier te maken

verder uitbreiden met CSS

  • ga eventueel verder met opdracht css17_stopwatch waarin je met CSS de stopwatch er zo uit laat zien: