Rainbow Props

Download het starterproject en voer daarna npm install uit.

📂 Naam project: lab-components-rainbow-props
🔗 Basisproject: de vereiste begincode is inbegrepen in het starterproject.

Maak een kopie van de lab-basics-rainbow applicatie van labo 1 naar een nieuw project en noem deze lab-components-rainbow-props. En zorg voor de volgende componenten:

• Rainbow: Heeft een property amount die het aantal kleuren aangeeft. Heeft ook een property direction die de richting van de kleuren aangeeft. Deze kan ofwel "horizontal" ofwel "vertical" zijn. Je kan de richting van de regenboog bepalen door de flexDirection van de container aan te passen.
• RainbowLine: Heeft een property color die de kleur van de lijn aangeeft. Heeft ook een property direction die de richting van de lijn aangeeft. Deze kan ofwel "horizontal" ofwel "vertical" zijn. De hoogte van de lijn is 4px indien de richting "horizontal" is, anders is de hoogte 100px.

Je kan dus bijvoorbeeld de volgende code gebruiken om een horizontale en een verticale regenboog te tonen:

<Rainbow amount={10} direction="horizontal"/>
<Rainbow amount={20} direction="vertical"/>

Dit zal de volgende output geven:

Live voorbeeld

Voorbeeld laden…

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