Labo 1

Voor dit labo moet je de volgende theorie bekeken hebben:

React app aanmaken
TSX
Statische bestanden
Lijsten

1. Expressies

Maak een nieuwe react applicatie aan en maak het volgende App.tsx component aan:

const App = () => {
    return (
        <div>
            <h1>Labo 1</h1>
        </div>
    );
}

export default App;

Opdracht

Maak een variabele aan met de naam random en geef deze de waarde van Math.random(). Toon deze waarde in de browser.
Maak een variabele aan met de naam getal1 en geef deze een waarde tussen 0 en 10. Toon deze waarde in de browser.
Maak een variabele aan met de naam getal2 en geef deze een waarde tussen 0 en 10. Toon deze waarde in de browser.
Maak een functie som aan die 2 parameters heeft en deze optelt. Gebruik deze functie om de som van getal1 en getal2 te berekenen en deze te tonen in de browser.
Maak een functie vermenigvuldiging aan die 2 parameters heeft en deze vermenigvuldigt. Gebruik deze functie om de vermenigvuldiging van getal1 en getal2 te berekenen en deze te tonen in de browser.
Vervang de div tags met een fragment tag.
Gebruik conditionele rendering om een boodschap te tonen in de browser afhankelijk van de waarde van random. Als random groter is dan 0.5 dan tonen we de vermenivuldiging van de twee getallen, anders tonen we de som van de twee getallen.

Voorbeeldoplossing

Labo 1: Expressies

Random: 0.5218130286103493

Getal 1: 4

Getal 2: 3

4 * 3: 12

Video

2. Slotmachine

Maak een nieuwe react applicatie aan labo1-slotmachine.

Opdracht

Toon alle mogelijke afbeeldingen van de slotmachine in de browser.
Maak 3 variabelen met de namen slot1, slot2 en slot3 aan. Zorg ervoor dat deze variabele een willekeurige waarde krijgt tussen 0 en 4 (met 4 inbregrepen)
Toon de tekst "Je hebt gewonnen" als slot1,slot2 en slot3 dezelfde waarde heeft. Toon de tekst "Je hebt verloren" als slot1,slot2 en slot3 een andere waarde hebben.
Zorg ervoor dat er 3 afbeeldingen worden getoond afhankelijk van de waarde van slot1, slot2 en slot3.
- Als de slot 0 is toon je een kers
- Als de slot 1 is toon je een citroen
- ...
Probeer de afbeeldingen te tonen met behulp van import, require en een url (public folder)

Voorbeeldoplossing

Labo 1: Slots

Je hebt verloren

Oplossingsvideo

3. Lijsten

Maak een nieuwe react applicatie aan labo1-lijsten.

Opdracht

Maak een array met een aantal getallen in. Zorg ervoor dat een bepaald getal meerdere keren voorkomt in de array.
Gebruik een unordered list (ul) om de getallen in de browser te tonen. Kies een goede key voor de list items.
Maak een array met 5 student objecten aan. Elke student heeft een id, een naam en een leeftijd.
Gebruik een ordered list (ol) om de namen van de studenten te tonen in de browser.
Gebruik een ordered list (ol) om de namen van de stundenten waarvan de naam met de letter J begint te tonen in de browser. Gebruik een combinatie van filter/map.
Gebruik een select met options element om de namen van de personen te tonen in de browser.
Gebruik een table om de namen en leeftijden van de personen te tonen in de browser.

Voorbeeldoplossing

Labo 1: Lijsten

Getallenlijst

Studentenlijst

Jef
Jan
Joris
Andie
Senne

Studentenlijst met J

Jef
Jan
Joris

Select

Table

Naam	Leeftijd
Jef	20
Jan	21
Joris	22
Andie	23
Senne	24

Oplossingsvideo

4. Slot machine met map

Maak een nieuwe react applicatie aan labo1-slotmachine-map. Kopieer je code van de vorige opdracht naar deze nieuwe applicatie.

Opdracht

Zorg ervoor dat je niet meer werkt met aparte variabelen per slot, maar dat je een array maakt met een variabel aantal slots (bepaald in een variabele).
Pas je code nu aan dat je gebruik maakt van een map functie om de slots te tonen in de browser.
Ook de tekst "Je hebt gewonnen" of "Je hebt verloren" moet je nu bepalen met een array functie.

Voorbeeldoplossing

Labo 1: Slots met map

Je hebt verloren

Oplossingsvideo

5. Alien Alphabet

Maak een nieuwe react applicatie aan alien-alphabet.

Opdracht

We willen in deze opdracht een aanzet geven tot een vertaalprogramma voor een buitenaards alfabet. We hebben een afbeelding voor elke letter van het alfabet. We willen deze afbeeldingen tonen in de browser.

Maak een array aan met alle letters van het alfabet. Je mag de letters zelf typen, of je kan gebruik maken van de Array.from functie. Zoek eens op hoe je aan de hand van de ASCII code een letter kan omzetten naar een string.
Maak een array aan met alle afbeeldingen van het alfabet. De afbeelding van de letters kan je vinden op https://raw.githubusercontent.com/slimmii/alien-alphabet/master/ gevolgd door de letter in hoofdletters en de extensie .png. Je kan deze afbeeldingen gebruiken door de src property van de img tag te zetten op de url van de afbeelding.
- Bv.:
  https://raw.githubusercontent.com/slimmii/alien-alphabet/master/A.png
  https://raw.githubusercontent.com/slimmii/alien-alphabet/master/B.png
  https://raw.githubusercontent.com/slimmii/alien-alphabet/master/C.png
  ...
Gebruik de map-functie om de afbeeldingen weer te geven in de browser. Elk element in de alphabetImages-array moet worden weergegeven als een <img> tag binnen een <button>-element.

Voorbeeldoplossing

6. Maaltafels

Maak een nieuwe react applicatie aan maaltafels.

Opdracht

Maak een React-component met de naam MultiplicationTable die een tabel genereert met de vermenigvuldigingstabel van getallen van 1 tot 10. Elk cel in de tabel moet het resultaat van de vermenigvuldiging van het rijnummer en het kolomnummer bevatten.

Voorbeeldoplossing

1	2	3	4	5	6	7	8	9	10
2	4	6	8	10	12	14	16	18	20
3	6	9	12	15	18	21	24	27	30
4	8	12	16	20	24	28	32	36	40
5	10	15	20	25	30	35	40	45	50
6	12	18	24	30	36	42	48	54	60
7	14	21	28	35	42	49	56	63	70
8	16	24	32	40	48	56	64	72	80
9	18	27	36	45	54	63	72	81	90
10	20	30	40	50	60	70	80	90	100

7. Regenboog

Maak een nieuwe react applicatie aan regenboog.

Opdracht

Definieer een array met de naam colors om een reeks kleuren te genereren. De array moet 100 verschillende kleuren bevatten, waarbij elke kleur wordt gedefinieerd in het HSL (Hue, Saturation, Lightness) kleurenmodel. Elke kleur in de reeks moet een unieke tint hebben, variërend van 0 graden (rood) tot 360 graden (rood).

Je kan deze array gebruiken om de kleuren te genereren:

const colors = Array.from({length: 100}, (_, i) => `hsl(${i * 360 / 100}, 100%, 50%)`);

Gebruik de map-functie om de kleuren in de array weer te geven als verticale div's op de webpagina. Elke balk moet een unieke kleur hebben, en de breedte van de balk moet 100% zijn, terwijl de hoogte 4 pixels moet zijn.

Je hebt op dit moment nog niet geleerd hoe je css gebruikt. Je kan dit doen aan de hand van inline css:

<div style={{width: "100%", height: "4px", backgroundColor: "red"}}></div>

Dit wordt later nog uitgelegd! Begrijp je hoe dit werkt, kan je ook eens proberen de regenboog in de andere richting te laten gaan! Tip: Twee woorden: flex-direction en flex!

8. Chat messages

Maak een nieuwe react applicatie aan chat-messages.

Opdracht

We willen een chat applicatie maken. We hebben een array met chat berichten. Elk bericht heeft een id, een naam, een bericht en een timestamp. We willen deze berichten tonen in de browser aan de hand van een eenvoudige tabel (zonder styling).

De data kan je gewoon in een variabele zetten. Je kan deze data gebruiken:

const messages = [
    {
        from: 'Wolverine',
        content: 'Hey Mags, heard you tried to bend a spoon with your mind again. You need a hand with that?',
        date: '2023-09-20 10:15 AM'
    },
    {
        from: 'Magneto',
        content: 'Very funny, Logan. At least I don\'t need metal claws to pick my teeth.',
        date: '2023-09-20 10:17 AM'
    },
    {
        from: 'Wolverine',
        content: 'Touché, old man. But I bet you still can\'t beat me at a game of chess.',
        date: '2023-09-20 10:20 AM'
    },
    {
        from: 'Magneto',
        content: 'Chess? How pedestrian. I prefer a game of "Move All the Metal Objects Away From Wolverine."',
        date: '2023-09-20 10:22 AM'
    },
    {
        from: 'Wolverine',
        content: 'Haha, nice try, metalhead. But I\'ve got my adamantium skeleton to keep me company.',
        date: '2023-09-20 10:25 AM'
    },
    {
        from: 'Magneto',
        content: 'True, but it doesn\'t help you with fashion choices. Those sideburns, really, Logan?',
        date: '2023-09-20 10:27 AM'
    },
    {
        from: 'Wolverine',
        content: 'What can I say? They help me channel my inner bad boy.',
        date: '2023-09-20 10:30 AM'
    },
    {
        from: 'Magneto',
        content: 'Speaking of bad boys, have you seen what Deadpool\'s up to lately?',
        date: '2023-09-20 10:32 AM'
    },
    {
        from: 'Wolverine',
        content: 'Oh, don\'t get me started on that guy. He makes me look like a choirboy.',
        date: '2023-09-20 10:35 AM'
    },
    {
        from: 'Magneto',
        content: 'Agreed, Logan. Let\'s team up and take him down. It\'s the only way to save our reputation.',
        date: '2023-09-20 10:37 AM'
    }
];

Voorbeeldoplossing

Wolverine	Hey Mags, heard you tried to bend a spoon with your mind again. You need a hand with that?	2023-09-20 10:15 AM
Magneto	Very funny, Logan. At least I don't need metal claws to pick my teeth.	2023-09-20 10:17 AM
Wolverine	Touché, old man. But I bet you still can't beat me at a game of chess.	2023-09-20 10:20 AM
Magneto	Chess? How pedestrian. I prefer a game of "Move All the Metal Objects Away From Wolverine."	2023-09-20 10:22 AM
Wolverine	Haha, nice try, metalhead. But I've got my adamantium skeleton to keep me company.	2023-09-20 10:25 AM
Magneto	True, but it doesn't help you with fashion choices. Those sideburns, really, Logan?	2023-09-20 10:27 AM
Wolverine	What can I say? They help me channel my inner bad boy.	2023-09-20 10:30 AM
Magneto	Speaking of bad boys, have you seen what Deadpool's up to lately?	2023-09-20 10:32 AM
Wolverine	Oh, don't get me started on that guy. He makes me look like a choirboy.	2023-09-20 10:35 AM
Magneto	Agreed, Logan. Let's team up and take him down. It's the only way to save our reputation.	2023-09-20 10:37 AM

9. Who's that Pokémon?

Maak een nieuwe react applicatie aan whos-that-pokemon. Maak een array met 150 Pokémon aan. Elke Pokémon heeft een id en een naam. We willen een afbeelding van een willekeurige Pokémon tonen. Onder de afbeelding tonen we 4 knoppen met de namen van 4 willekeurige Pokémon.

De afbeelding kan gehaald worden op de volgende url: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/{id}.png.

Je kan de identiteit van de pokémon verbergen door filter: "brightness(0) te gebruiken op de afbeelding. De knoppen moeten nog niets doen.

Voorbeeldoplossing

1	2	3	4	5	6	7	8	9	10
2	4	6	8	10	12	14	16	18	20
3	6	9	12	15	18	21	24	27	30
4	8	12	16	20	24	28	32	36	40
5	10	15	20	25	30	35	40	45	50
6	12	18	24	30	36	42	48	54	60
7	14	21	28	35	42	49	56	63	70
8	16	24	32	40	48	56	64	72	80
9	18	27	36	45	54	63	72	81	90
10	20	30	40	50	60	70	80	90	100

1	2	3	4	5	6	7	8	9	10
2	4	6	8	10	12	14	16	18	20
3	6	9	12	15	18	21	24	27	30
4	8	12	16	20	24	28	32	36	40
5	10	15	20	25	30	35	40	45	50
6	12	18	24	30	36	42	48	54	60
7	14	21	28	35	42	49	56	63	70
8	16	24	32	40	48	56	64	72	80
9	18	27	36	45	54	63	72	81	90
10	20	30	40	50	60	70	80	90	100

Labo 1

1. Expressies​

Opdracht​

Voorbeeldoplossing​

Labo 1: Expressies

Video​

2. Slotmachine​

Opdracht​

Voorbeeldoplossing​

Labo 1: Slots

Oplossingsvideo​

3. Lijsten​

Opdracht​

Voorbeeldoplossing​

Labo 1: Lijsten

Getallenlijst

Studentenlijst

Studentenlijst met J

Select

Table

Oplossingsvideo​

4. Slot machine met map​

Opdracht​

Voorbeeldoplossing​

Labo 1: Slots met map

Oplossingsvideo​

5. Alien Alphabet​

Opdracht​

Voorbeeldoplossing​

6. Maaltafels​

Opdracht​

Voorbeeldoplossing​

7. Regenboog​

Opdracht​

8. Chat messages​

Opdracht​

Voorbeeldoplossing​

9. Who's that Pokémon?​

Voorbeeldoplossing​

1. Expressies

Opdracht

Voorbeeldoplossing

Video

2. Slotmachine

Opdracht

Voorbeeldoplossing

Oplossingsvideo

3. Lijsten

Opdracht

Voorbeeldoplossing

Oplossingsvideo

4. Slot machine met map

Opdracht

Voorbeeldoplossing

Oplossingsvideo

5. Alien Alphabet

Opdracht

Voorbeeldoplossing

6. Maaltafels

Opdracht

Voorbeeldoplossing

7. Regenboog

Opdracht

8. Chat messages

Opdracht

Voorbeeldoplossing

9. Who's that Pokémon?

Voorbeeldoplossing

1	2	3	4	5	6	7	8	9	10
2	4	6	8	10	12	14	16	18	20
3	6	9	12	15	18	21	24	27	30
4	8	12	16	20	24	28	32	36	40
5	10	15	20	25	30	35	40	45	50
6	12	18	24	30	36	42	48	54	60
7	14	21	28	35	42	49	56	63	70
8	16	24	32	40	48	56	64	72	80
9	18	27	36	45	54	63	72	81	90
10	20	30	40	50	60	70	80	90	100