css17 | stopwatch

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