Voorkennis:
- opdracht js17_stopwatch
Doelen:
- Toepassen van position: absolute met met top: ..px en left: ..px
- clickable gebieden aanbrengen op background-image
- True Type Font (ttf) instaleren en gebruiken
- Wijzigen / toggelen van css-classes
In de opdracht js17_stopwatch is met Javascript een eenvoudige stopwatch gemaakt.
We leggen in deze opdracht, het display en klikfuncties over een bestaande foto van een stopwatch en laten die weer werken.
afb 1
afb 2
afb 3
opdracht
- neem als basis de code opdracht js17_stopwatch
- zoek een afbeelding van een stopwatch (mooist is een vrijstaande png) afb 1
- plaats deze als background van een <div> die postition: relative heeft en pas width en height aan zodat de afbeelding past
- maak absolute divs aan op de plek van het display, start/stop button en reset en light-buttons.
- geef de divs voor het gemak even border mee afb 2
- Positioneer met top en left en pas breedte aan met width en height
- maak de divs clickable en verwijs naar bestaande functions van js17_stopwatch
- maak de achtergrond van display grijs
- zoek een lettertype die op een quartz-klok lijkt op internet
- download het ttf bestand
- zoek op hoe je een ttf bestand in je webpagina gebruikt en pas toe afb 3
- voeg een class toe waarmee je de button light laat werken