4. DOM Manipulatie & events
4. DOM Manipulatie & events
In deze oefeningenreeks oefen je op:
- Het manipuleren van de DOM
- Het koppelen van events aan elementen
- De concepten uit de vorige lessen
Voor deze oefeningen zijn startbestanden voorzien, je vindt deze op GitPub.
Startbestanden
Oefening 1
Maak twee arrays met groenten en fruit en vul deze op met een aantal items. Gebruik een card-component van Bootstrap om dezelfde weergave te verkrijgen als in onderstaande afbeelding.
Druk in de body van het card-element de twee arrays afzonderlijk af met als scheidingsteken een komma en een spatie. Daarna voeg je beide arrays samen en druk je deze nieuwe array af als een string, weer met als scheidingsteken een komma en een spatie. De startbestanden bevatten al 3 div’s met een id: fruit, groenten en resultaat die je kan gebruiken om de tekst in te plaatsen.
Oefening 2
Schrijf een webpagina die een willekeurige foto toont wanneer je op de knop "Random foto" drukt. In de map img vind je drie afbeeldingen die je kan gebruiken.
- 1.webp
- 2.webp
- 3.webp
Zorg ervoor dat dezelfde afbeelding niet twee keer na elkaar zichtbaar is. Om dit te controleren, toon je een log van de foto's in een div onder de knop. Hierin staat steeds wat de vorige waarde was en de nieuwe random waarde die je gegenereerd hebt. Zoals je in onderstaand voorbeeld kunt zien, was de vorige waarde 1 en moeten we steeds opnieuw random waarden blijven genereren totdat de nieuwe waarde (3) verschillend is van de vorige waarde (1).
Oefening 3
Pas de vorige oefening aan zodat deze ook werkt met afbeeldingen die een eigen bestandsnaam hebben (desert.webp, mountain_forest.webp, mountain_snow.webp, space.webp). Bewaar de afbeeldingen in een array en genereer een willekeurige index om er een afbeelding uit te selecteren.
Oefening 4
Maak een webpagina met drie knoppen waarmee je de stijl van bepaalde tekst kan aanpassen.
Wanneer je op de knop 'Verander alle titels' klikt:
- Wijzig je de tekstkleur voor de headers naar rood
- Onderlijn je alle headers
Wanneer je op de knop 'Verander alle subtitles' klikt:
- Wijzig je alle subtitels naar donkerblauw
- Wijzig je alle subtitels naar het lettertype 'Verdana'
Wanneer je op de knop 'Verander alles' klikt:
- Wijzig je zowel de titels als de subtitels, zoals hierboven beschreven.
Oefening 5
Maak een webpagina met een knop waarmee het licht aan/uit gedaan kan worden. Als het licht aan is, moet de afbeelding pic_bulbon.gif getoond worden, als het licht uit is, moet de afbeelding pic_bulboff.gif getoond worden. Ook de text in de knop moet aangepast worden van 'Doe het licht aan' naar 'Doe het licht uit' en omgekeerd.
Oefening 6
Maak een webpagina waarmee je producten kan toevoegen aan een winkelkar. Wanneer je op de knop 'Toevoegen' klikt, voor je het product toe aan een unordered list (de winkelkar).
Als de winkelkar leeg is, moet één item getoond worden met de tekst 'Geen producten gevonden'.
Aantal & prijs
Breid het formulier uit met twee nieuwe inputs waarin je het aantal kan meegeven en de prijs van het product. Voeg verder ook een overzicht toe van het totale bestelbedrag.
Kortingscode
Breid het formulier uit met een input waarmee een kortingscode ingegeven kan worden. Voorzie de mogelijkheid om kortingscodes van OFF1 tot OFF60 in te geven.
De code moet gevalideerd worden bij elke aanpassing aan het inputveld, gebruik hiervoor het input event. Elke code die vraag voor korting tussen 1% en 60% is geldig. Als de code geldig is, moet de korting toegepast worden op het totale bedrag. Als de code niet geldig is, toon je bovenaan het formulier een foutmelding, dit doe je via een Bootstrap alert component.
Oefening 7
Maak een spel waar een speler moet proberen te raden hoe vaak er een zes gegooid zal worden bij 12 spelers. Bouw 12 cards (via Bootstrap) met een grijze achtergrond (bg-secondary) en elk een eigen id (speler1, speler2, ...). Deze code moet onderstaande structuur hebben, die natuurlijk 12 keer herhaald wordt.
<div class="col-md-3 mb-3">
<div class="card text-white bg-secondary" id="speler1">
<div class="card-body">
<h5 class="card-title">speler 1</h5>
</div>
</div>
</div>Tips
Je kan die eenvoudig oplossen via Emmet. Probeer dit voordat je begint te kopiëren.
Je kan verstrekken van volgende code:
div.col-md-3.mb-3*12>div.card...Wanneer de gebruiker op de 'PLAY' knop klikt, moet er een dialoogvenster getoond worden waarin de gebruiker het aantal keer dat 6 gegooid wordt kan raden.
Genereer vervolgens 12 willekeurige getallen tussen 1 en 6. Als er een 6 gegooid wordt, dan verander je de overeenkomstige achtergrondkleur van grijs (bg-secondary) naar groen (bg-succes). Verder wordt het alert venster onder the spelers ook opgevuld worden met de resultaten van de worpen.
Als de gebruiker het juiste aantal geraden heeft, wordt een alert getoond met de tekst 'Proficiat! Je hebt het juist geraden!'. Als de gebruiker het fout heeft, wordt een alert getoond met de tekst 'Helaas, je hebt het fout geraden!'.
Als de gebruiker op de 'RESET' knop klikt, worden alle kaarten terug grijs en wordt de alert leeg gemaakt.