waarderingssysteem ⋆⋆⋆⋆⋆

In deze 4 flimpjes zie je hoe je een rating-systeem maakt. Probeer dit op eeen eigen manier met eigen namen voor variabelen en functies na te maken.
Het script is JavaScript, je mag het ook uitwerken met jQuery.
Probeer het script in tegenstelling tot de filmpjes eens in de header te koppelen.

Wat je leert

• Slimme manier in CSS om afbeeldingen over elkaar te leggen;
• gebruik maken van functies in JS;
• stijlen met JS;
• random getallen in JS;
• afronden in Javascript;
• event-listeners voor meerdere elementen tegelijk;
• omzetten van een variabele-type in JS.

De weergave van een waarderingssysteem met sterren gaat met span's die in elkaar geschoven zijn. Zonder waardering zie je de achtergrond-afbeelding van de buitenste span, en hoe hoger het percentage wordt, hoe hoger de breedte van de binnenste span en daarmee wordt die achtergrondafbeelding meer zichtbaar.

Span's zijn inline elementen, om ze dus breedte te geven zonder inhoud, moet het display-type op inline-block worden ingesteld.

Het manipuleren van stijlen kan ook met JavaScript worden gedaan. Omdat dit vaak moet gebeuren maken we daar ook een functie van met 2 parameters: een voor het selecteren van de juiste ster, de andere voor de breedte in procenten.

Wat met 1 ster kan, kan ook met meerdere. Je roept de functie uit het vorige filmpje telkens aan met andere parameters. Dat kan prima met een for-lus.
We maken nu en functie die met één parameter de 5 sterren juist inkleurt.

Het getal wordt nu niet in het script gezet, maar door het script random gegenereerd.
Met Math.random(); krijg je een getal tussen nul en 1. Wil je dus een waarde voor het aantal kliks tussen 0 en 9 hebben , vermenigvuldig je dat met 9. Om er een heel getal van te maken rond je het naar boven af met Math.ceil();

Eerst de 5 sterren in een array stoppen met document.querySelectorAll(); . Elk element uit deze array krijgt via een for-lus een event-listener met .addEventListener(); . De functie, die je daar aanroept, haalt uit het attribuut 'data-role' het nummertje uit de DOM op.
Met parseInt(); wordt (de string omgezet naar een heel getal. Die kan dan worden opgeteld bij de totaalscore. Het aantal kliks wordt ook met 1 opgehoogd, en die nieuwe waarden van de variabelen kunnen worden uitgevoerd en verwerkt in een nieuwe inkleuring van de sterren.