Link Search Menu Expand Document

Apparaat DIV setup

Bekijk de video

Bekijk de video fullscreen en doe daarna de oefeningen / opdrachten.


Code

Code van het data object (zoals in de video wordt uitgelegd)

// Zet alle benodigde informatie in een zelfgemaakt object
let data = {
  container: apparaatDiv, // De verwijzing het div element
  apparaat: apparaat, // De apparaatgegevens
  weergave: "kosten", // Welke weergave je standaard wilt
  prijs_kwh: 0.2, // De prijs voor 1 KwH electriciteit
};

Opdrachten

  • Gebruik console.log om de NodeList te bekijken.
  • Zet in je JS-bestand de informatie die bij de objecten horen.

Als je het leuk vindt

  • Kies uit de PDF een apparaat en voeg de juiste gegevens toe aan het apparaten.json bestand.
  • Zoek een foto voor het apparaat en gebruik deze voor het apparaat in het JSON-bestand.
  • Verklein de foto, zodat deze maximaal 400 pixels breed is.

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

Image, slider en button