Stopwatch

Project aanmaken

Dit is een oefening op property binding, event binding en PWA.

  • Start een nieuw Angular-project zonder spec-files (-S) en SCSS in plaats van CSS.
$ ng new stopwatch -S --style scss
$ cd stopwatch
$ ng g c stopwatch -s
  • Vervang de inhoud van app/app.component.html door <app-stopwatch></app-stopwatch>
  • De lay-out mag je zelf bepalen.
  • Werk vanaf nu uitsluitend in deze bestanden:
    • src/styles.scss
    • src/app/stopwatch/stopwatch.component.ts
    • src/app/stopwatch/stopwatch.component.html

Preview: https://z01.be/stopwatch/

Stopwatch

Basis-versie

  • Maak enkele knoppen waarmee je de stopwatch initialiseert.
    Bijvoorbeeld: 30sec, 1min, 4min, 10min, ...
    • De actieve keuze wordt geaccentueerd (bijvoorbeeld met een andere kleur).
  • Maak drie knoppen om de timer te bedienen (start, pauze en refresh).
    • Als de stopwatch niet loopt, is enkel de startknop aanklikbaar.
    • Zolang de stopwatch loopt, zijn enkel de pauzeknop en de refreshknop aanklikbaar.
  • Toon de resterende tijd op het scherm.

Enkele nuttige tips:

Met deze code kan je starten

Template Component SCSS 

        

        

          

        

        

          

        

      

    

  


  

    

      

        
Uitbreiding 1

        
    
          
  • Zodra de stopwatch op nul komt, hoor je een geluidje.
    • 
          
  • Visualiseer de resterende tijd als gekleurde achtergrond.
    • 
        

      

      

        
Uitbreiding 1: PWA

        
    
          
  • Maak van de toepassing een PWA zodat je ze als app kan installeren op je smartphone.
    •