Image, slider en button

Bekijk de video

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

Code

Nodig bij het kijken van de video:

Om achtergrond image in te stellen:

// Achtergrond afbeelding zetten
  apparaatDiv.style.backgroundImage = `url(${data.apparaat.image})`;

Om slider uit te lezen:

  slider.addEventListener("input", (event) => {
    minuten.innerHTML = slider.value;
    updateGegevens(data);
  });

Voor het “togglen” van de knop:

knop.addEventListener("click", () => {
    if (knop.innerText === "Toon verbruik") {
        data.weergave = "verbruik";
        knop.innerText = "Toon kosten";
    } else {
        data.weergave = "kosten";
        knop.innerText = "Toon verbruik";
    }
    updateGegevens(data);
});

updateGegevens(data);

Opdrachten

• Stel de achtergrondafbeelding in.
• Zorg dat de slider wordt uitgelezen.
• Zorg dat de minuten worden aangepast als je de slider beweegt.

Als je het leuk vindt

• Kijk met hulp van deze uitleg of je de slider mooier kunt stijlen.
• Maak ook de button mooier. Gebruik de W3 Schools uitleg of de uitleg van CSS Tricks.

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

Update apparaat gegevens