Ga naar hoofdinhoud

Slotmachine

Download het starterproject en voer daarna npm install uit.

πŸ“‚ Naam project: lab-components-slot-machine
πŸ”— Basisproject: de vereiste begincode is inbegrepen in het starterproject.

Kopieer de slotmachine code van labo 1 en noem deze nieuwe applicatie lab-components-slot-machine en zorg voor de volgende dingen:

  • SlotMachine: aanvaard een property slots die het aantal slots aangeeft. Deze component bevat de logica om de slots te genereren en te tonen. Je kan deze component ook gebruiken om de logica te schrijven om te bepalen of de speler gewonnen heeft of verloren heeft.

    <SlotMachine slots={5} />
  • Slot: deze component bevat de logica om een slot te tonen. De waarde van de slot wordt doorgegeven via een property value.

    <Slot value={1} />
  • Zorg ervoor dat je meerdere slotmachines kan tonen op een pagina. Toon bijvoorbeeld een SlotMachine met 5 slots, een SlotMachine met 4 slots en een SlotMachine met 3 slots.

  • Gebruik css modules om de stijl van de slotmachine te bepalen. Je bent vrij om de stijl te kiezen.

De applicatie moet ongeveer er als volgt uitzien:

Live voorbeeld​

Voorbeeld laden…

Oplossingsvideo​

Oplossing downloaden​

Eerst zelf proberen!

Maak de oefening eerst zelf, ook als het moeizaam gaat. Pas daarna download je de oplossing om ze met je eigen code te vergelijken.

Als je meteen de oplossing bekijkt, leer je niets. Het zoeken en vastlopen is net het deel waar je het meeste uit leert.

Ik heb het geprobeerd, download