Update apparaat gegevens
Bekijk de video
Bekijk de video fullscreen en doe daarna de oefeningen / opdrachten.
Code
CSS code om de achtergrond-afbeelding beter weer te geven en om van de apparaat div een flex container te maken:
display: flex;
flex-direction: column;
align-items: center;
background-size: 120px;
background-repeat: no-repeat;
background-position: 30px center;
Javascript code voor de updateGegevens function
// Nu gegevens invullen van het apparaat!
titel.innerHTML = data.apparaat.naam;
// Aantal minuten uitlezen
const minutenPerDag = parseInt(slider.value);
// Kijken of we de kosten of het verbruik willen zien
if (data.weergave === "kosten") {
let jaarlijkseKosten = berekenJaarKosten(minutenPerDag, data.apparaat.vermogen);
nummer.innerHTML = "€ " + jaarlijkseKosten + " per jaar";
} else {
let jaarlijksVerbruik = berekenJaarVerbruik( minutenPerDag, data.apparaat.vermogen);
nummer.innerHTML = jaarlijksVerbruik + " KwH";
}
Opdrachten
- Voeg de CSS toe en zorg dat je kunt uitleggen wat er met de extra CSS gebeurt.
- Pas de titel van het apparaat aan.
- Voeg de code aan het JS-bestand toe.
Bewijs opslaan
- Sla je wijzigingen op.
- Maak een screenshot van het resultaat in je browser en bewaar deze bij je code.
- Maak een commit met een duidelijke commit message