# Challenges

# Portfolio Challenge

## O1 - Ontwerp de basis pagina's

Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.

 **De opdracht:**

- De website moet bestaan uit een  **homepage**  en  **3 vervolgpagina's.**    
     *voorbeeld home pages:*   **![](https://talnet.instructure.com/courses/12463/files/1832952/preview?verifier=H0h0XJwfE46Us3LVKbwAk2MmPOtpeO8OelTjGMwa)   
      
    ![Screenshot 2023-09-27 152429.png](https://talnet.instructure.com/courses/12463/files/1833000/preview?verifier=JUB5pv0AaQLW48P73Xrw69BrkDwNBCSucEDGkI9G)**
- Elke pagina moet een header blok hebben met  **jouw logo**  ,  **jouw naam**  en een  **menu**  waar  **alle menu-items**  in staan.   
    Let op, het menu moet werken!
- Elke pagina moet een  **footer**  hebben waar een copyright in staat.   
      
     *voorbeeld footer:   
      
    ![](https://talnet.instructure.com/courses/12463/files/1832961/preview?verifier=xfr9q95qrvmPif67wy3zw61BAQehswtZGg9euVFP)*
- Alle pagina's moeten worden vormgegeven met  **css classes**  , maak gebruik van een  **externe stylesheet**  .
- De website heeft de volgende pagina's / menu-items:   
      
    
    1. **Home (homepage)**  (index.html)   
         *Je homepagina is je etalage, een homepagina moet bezoekers nieuwsgierig maken naar de rest van de website.   
        Zorg dat je homepage er aantrekkelijk uitziet en dat de bezoeker in een oogopslag kan zien welke informatie er op de website te vinden is.   
        Gebruik op de home page afbeeldingen en links naar de vervolgpagina's*
    2. **Mijn profiel (1e vervolgpagina)**  (profiel.html)   
        Hierin plaats je een foto met een klein verhaaltje over jezelf.   
        De exacte inhoud staat in de volgende opdracht,
    3. **Over mij (2e vervolgpagina)**  <span style="color: var(--ic-brand-font-color-dark); font-family: inherit; font-size: 1rem;"> (overmij.html)   
        Plaats hier de 6 lesopdrachten van persoonlijk profileren  *(tijdlijn, normen &amp;waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)*    
        </span>
    4. **Mijn visie (3e vervolgpagina)**  (mijnvisie.html)   
        Voorlopig nog leeg, deze wordt pas vele later gevuld.

### Opdracht

1. <span style="color: #000000;"> Bouw een pagina voor de  *homepage*  (index  *.html*  ). </span>
2. <span style="color: #000000;"> Bouw een pagina voor je  *profiel*  (profiel.html).   
    </span>
3. <span style="color: #000000;"> Bouw een pagina voor je  *overmij*  (overmij.html). </span>
4. <span style="color: #000000;"> Bouw een pagina voor je  *visie (*  visie  *.html).*  </span>

<span style="color: #000000;"> Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken!   
</span> <span style="color: #000000;"> Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze. </span>

<span style="color: #000000;"> Leef je uit en gebruik de technieken die je hebt geleerd!   
</span>

### Inleveren bij deze opdracht:

1. <span style="color: #000000;"> index.html </span>
2. <span style="color: #000000;"> profiel.html   
    </span>
3. <span style="color: #000000;"> overmij.html </span>
4. <span style="color: #000000;"> visie.html   
      
    </span>
5. screenshot van index.html in browser
6. screenshot van <span style="color: #000000;"> profiel </span> .html in browser
7. screenshot van overmij.html in browser
8. screenshot van visie.html in browser

## O2 - Maak de website compleet

<span style="font-size: 18pt;">  **Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen.**  </span>   
  
De vervolgpagina's vul je met onderstaande:   
  
 **Vervolgpagina Mijn profiel:**    
\- Plaats hier een foto van jezelf   
\- Schrijf hier je naam, leeftijd, de stad waar je woont

 **Vervolgpagina Over mij:**    
\- Plaats hier de 6 lesopdrachten van persoonlijk profileren  *(tijdlijn, normen &amp;waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)*

 **Vervolgpagina Mijn visie:**

- deze laat je nog leeg

 **Als je tevreden bent kun je de files inleveren en tonen aan een van de docenten.**

### Inleveren bij deze opdracht:

- Een screenshot van je homepage, zorg dat de hele pagina zichtbaar is!
- Screenshot van iedere vervolgpagina, zorg dat de hele pagina zichtbaar is!
- Vervolg-pagina met "profiel" in HTML
- Vervolg-pagina met "over mij" in HTML

# Voetbal Challenge

### Challenge

In deze challenge krijg je een aantal voetbaluitslagen en met die uitslagen moet jij berekenen hoeveel punten de voetbalclubs hebben.

### Voorkennis

Voor deze challenge heb je kennis nodig van:

- HTML en CSS basis kennis.
- gebruik van variabelen in PHP.
- loops in PHP.
- indexed arrays, assiociative arrays en complexe arrays (datastructuren) in PHP.
- gebruik van condities (if-then) in PHP.

### Data structuren

Data structuren zijn manieren waarop gegevens in de computer zijn opgeslagen. In deze challenge gaan we kijken naar een datastructuur van voetbaluitslagen. Uit deze uitslagen gaan we per ploeg berekenen hoeveel punten deze club in totaal heeft.

In deze challenge bestaat de datastructuur uit een array van gespeelde wedstrijden.

Elke wedstrijd is een assciociative array, bijvoorbeeld:

```
['thuis' => 'FC Twente', 'uit' => 'Fortuna Sittard', 'uitslag'=> [1,2] ]
```

Het assiociative array heeft drie elementen. De naam van de thuisclub, de naam van de uitclub en de uitslag. De uitslag zelf is weer een (indexed) array met twee elementen.

### De uitdaging

Je hebt een datastructuur $uitslagen (zie regel 3 en volgende in code hieronder).

Deze datastructuur is een array van acciociative arrays waarin van een aantal gespeelde wedstrijden de eindscore staat.

Je ziet op bijvoorbeeld regel 4 dat Feyenoord tegen FC Twente heeft gespeeld en dat de uitslag 1-2 was. FC Twente heeft dus gewonnen.

De opdracht is om een lijstje te maken waarin van alle voetbalclubs het aantal punten dat zij hebben behaald wordt berekend.

De punten worden als volgt berekend;

<table border="1" id="bkmrk-uitslag-punten-gewon"><tbody><tr><td>Uitslag</td><td>Punten</td></tr><tr><td>Gewonnen</td><td>3</td></tr><tr><td>Gelijkspel</td><td>1</td></tr><tr><td>Verloren</td><td>0</td></tr></tbody></table>

Voorbeeld, later we FC Twente nemen.

FC Twente heeft 3 x gespeeld (regel 4, 21 en 31). FC Twente heeft 2x gewonnen en 1x verloren. FC Twente heeft dus 6 punten uit 3 wedstrijden.

De output zou dan worden:

<table border="1" id="bkmrk-club-punten-gespeeld"><tbody><tr><td>Club</td><td>Punten</td><td>Gespeeld</td></tr><tr><td>FC Twente</td><td>6</td><td>3</td></tr><tr><td>...</td><td>...</td><td>..</td></tr></tbody></table>

### The code

Je krijgt al een heel stuk code aangeleverd.

1. Er is een datastructuur voor de uitslage ($uitslagen).
2. Dan wordt er een tabel afgedrukt met alle uitslagen.
3. Vervolgens wordt er twee lege data structuren gemaakt. 
    - $punten hierin komt per ploeg te staan hoeveel punten ze hebben. Bijvoorbeeld $punten\['FC Twente'\] wordt op 0 gezet, maar zal uiteindelijk de waarde 6 moeten krijgen.
    - $gespeeld hierin komt per ploeg te staan hoeveel wedstrijden zij gespeeld hebben. Bijvoorbeeld $gespeeld\['FC Twente'\] wordt op 0 gezet, maar zal uiteindelijk de waarde 3 moeten krijgen.
4. <span style="background-color: #fbeeb8;"> Na deze code moet jij code toevoegen die de punten en het aantal gespeelde wedstrijden berekend. </span>
5. Het laatste code-stukje drukt alle punten en aantal gespeelde wedstrijden af.

Je  *mag*  de bestaande code veranderen. Het enige dat vast staat is de $uitslagen array. Deze blijft ongewijzigd!

```php
<?php

$uitslagen=[
['thuis' => 'Feyenoord', 'uit' => 'FC Twente', 'uitslag'=> [1,2] ],
['thuis' => 'AZ', 'uit' => 'RKC Waalwijk', 'uitslag'=> [1,3] ],
['thuis' => 'PEC Zwolle', 'uit' => 'PSV', 'uitslag'=> [1,2] ],
['thuis' => 'Heracles Almelo', 'uit' => 'Sparta Rotterdam', 'uitslag'=> [1,3] ],
['thuis' => 'sc Heerenveen', 'uit' => 'Go Ahead Eagles', 'uitslag'=> [3,1] ],
['thuis' => 'FC Groningen', 'uit' => 'SC Cambuur', 'uitslag'=> [2,3] ],
['thuis' => 'Vitesse', 'uit' => 'Ajax', 'uitslag'=> [2,2] ],
['thuis' => 'Willem I', 'uit' => 'FC Utrecht', 'uitslag'=> [3,0] ],
['thuis' => 'N.E.C.', 'uit' => 'Fortuna Sittard', 'uitslag'=> [0,1] ],

['thuis' => 'Ajax', 'uit' => 'sc Heerenveen', 'uitslag'=> [5,0] ],
['thuis' => 'RKC Waalwijk', 'uit' => 'Heracles Almelo', 'uitslag'=> [2,0] ],
['thuis' => 'Fortuna Sittard', 'uit' => 'Vitesse', 'uitslag'=> [1,2] ],
['thuis' => 'Sparta Rotterdam', 'uit' => 'PEC Zwolle', 'uitslag'=> [2,0] ],
['thuis' => 'Go Ahead Eagles', 'uit' => 'Feyenoord', 'uitslag'=> [0,1] ],
['thuis' => 'SC Cambuur', 'uit' => 'Willem I', 'uitslag'=> [1,1] ],
['thuis' => 'PSV', 'uit' => 'N.E.C.', 'uitslag'=> [3,2] ],
['thuis' => 'FC Twente', 'uit' => 'FC Groningen', 'uitslag'=> [3,0] ],
['thuis' => 'FC Utrecht', 'uit' => 'AZ', 'uitslag'=> [2,2] ],

['thuis' => 'Feyenoord', 'uit' => 'PSV', 'uitslag'=> [2,2] ],
['thuis' => 'AZ', 'uit' => 'Ajax', 'uitslag'=> [2,2] ],
['thuis' => 'Vitesse', 'uit' => 'sc Heerenveen', 'uitslag'=> [1,2] ],
['thuis' => 'N.E.C.', 'uit' => 'Go Ahead Eagles', 'uitslag'=> [1,0] ],
['thuis' => 'FC Groningen', 'uit' => 'Sparta Rotterdam', 'uitslag'=> [1,2] ],
['thuis' => 'PEC Zwolle', 'uit' => 'FC Utrecht', 'uitslag'=> [1,1] ],
['thuis' => 'Willem I', 'uit' => 'Heracles Almelo', 'uitslag'=> [4,0] ],
['thuis' => 'FC Twente', 'uit' => 'Fortuna Sittard', 'uitslag'=> [1,2] ],
['thuis' => 'SC Cambuur', 'uit' => 'RKC Waalwijk', 'uitslag'=> [0,0] ],

['thuis' => 'N.E.C.', 'uit' => 'Fortuna Sittard', 'uitslag'=> [0,0] ],

];

echo "<table border=1>";
echo "<tr><th>Thuis</th><th>Uit</th><th></th><th></th></tr>";
foreach ($uitslagen as $uitslag) {
  echo "<tr>";
  echo "<td>".$uitslag['thuis']."</td>";
  echo "<td>".$uitslag['uit']."</td>";
  echo "<td>".$uitslag['uitslag'][0]."</td>";
  echo "<td>".$uitslag['uitslag'][1]."</td>";
  echo "</tr>";
}
echo "</table>";

$punten=[];
$gespeeld=[];
foreach ($uitslagen as $uitslag) {
  $punten[$uitslag['thuis']]=0;
  $punten[$uitslag['uit']]=0;
  $gespeeld[$uitslag['thuis']]=0;
  $gespeeld[$uitslag['uit']]=0;
}

// bereken hier de punten en aantal gespeelde wedstrijden per team.
//
// Het is de bedoeling om:
//    de punten in het array $punten[] te zetten;
//    en het aantal gespelede wedstrijden in $gespeeld[];
// Deze arays zien er als volgt uit:
//    $punten['naam van de club'] = 0
//    $gespeeld['naam van de club'] = 0
// Alle waarden zijn dus 0 en is jou taak om beiede arrays met de juiste waarden te vullen.
// Gebruik alleen code die je al hebt geoeffend; je moet de code kunnen uitleggen.

echo "<table border=1>";
echo "<tr><th>Club</th><th>Punten</th><th>Gespeeld</th></tr>";
foreach ($punten as $key => $value) {
  echo "<tr>";
  echo "<td>".$key."</td>";
  echo "<td>".$value."</td>";
  echo "<td>".$gespeeld[$key]."</td>";
  echo "</tr>";
}
echo "</table>";


```

### Output

De output is  **gesorteerd**  op punten en laat een lijstje zien van alle voetbalclubs en hun behaalde punten. De tabel ziet er netjes uit.

 *Onderstaand plaatje is een voorbeeld, de uitkomsten kunnen iets anders zijn.*

[ ![image-1657872023212.png](https://www.roc.ovh/uploads/images/gallery/2022-07/scaled-1680-/image-1657872023212.png) ](https://www.roc.ovh/uploads/images/gallery/2022-07/image-1657872023212.png)

### Aanpak

Er zijn meerdere mogelijkheden om dit aan te pakken. Hieronder wordt een mogelijke oplossing beschreven. Je hoeft deze stappen niet te volgend.

1. We moeten door de uitslagen array heen lopen om per wedstrijd te bepalen welke ploeg hoeveel punten krijgt.   
    Maak dus een loop die door de uitslagen loopt.
2. In de loop maak je twee variabelen $  *thuisClub*  en $  *uitClub*  . Je geeft deze de waarden (naam) van de thuis en uitclub.   
    -&gt;  **Test**  of je deze twee variabelen de juiste waarde heb gegeven door ze af te drukken.
3. In de loop maak je nog twee variabelen $  *thuisScore*  en $  *uitScore*  . Je geeft deze de waarden van het aantal doelpunten dat de thuis- en uitclub hebben gescoord.   
    -&gt;  **Test**  of je ook deze twee variabelen de juiste waarde heb gegeven door ze af te drukken.
4. Nu zijn er drie mogelijkheden:   
    De  *$thuisScore*  &gt; $  *uitScore*  , de $  *thuisClub*  krijgt 3 punten   
    De $  *uitScore*  &gt; $  *thuisScore*  , de $  *uitClub*  krijgt 3 punten   
    De $  *thuisScore*  == $  *uitScore*  , de $  *thuisClub*  en $  *uitClub*  krijgen beiden 1 punt.   
      
    Maak de juiste if's en vul het punten array.   
      
    Denk eraan dat de key van het punten array de naam van de club is en die staat in $  *thuisClub*  en $  *uitClulb*  .   
    -&gt;  **Test**  , bedenk een manier om te testen of de club de juiste punten krijgt.
5. Voor de thuis- en uitclub moet je het aantal gespeelde wedstrijden met één ophogen. Hiervoor hoog je de juiste waarde op in het $  *gespeeld*  array. Ook in het $  *gespeeld*  array is de key de naam van de club.
6. Test de gehele berekening.

### Eisen

1. Zorg ervoor dat alle uitkomsten kloppen (60 punten). Vergeet niet te sorteren.
2. Zorg ervoor dat de output gestyled is (gebruik styles en classes). Maak er wat moois van, overtuig de klant dat jij iets moois kan maken (20 punten)
3. Zorg ervoor dat de HTML code klopt en volledig is. Dus gebruik &lt;html&gt;, &lt;head&gt; etc (10 punten).
4. De code klopt, het inspringen en uitlijnen is goed en je hebt duidelijk commentaar toegevoegd om uit te leggen wat je doet (10 punten).

### Inleveren

1. Screendump van jouw gehele browser met het resultaat.
2. De PHP code en eventueel je CSS style sheet.

\--

# Javascript Challenge

## Bestelsysteem kantine

Maak een bestelsysteem voor de kantine van het ROC. In het scherm van het systeem zijn twee blokken zichtbaar. Het linkerblok bestaat uit een bestellijst / formulier, waarin kan worden aangegeven wat wordt besteld en de aantallen. Hier staan minimaal 4 te bestellen producten. Elk product heeft een andere prijs. In het rechter blok wordt een overzicht gegeven van de bestelling. Hierin staan de bestelde producten, de kosten per product (rekening houdend met het aantal dat wordt besteld) en de totale kosten van de bestelling.

Na het invoeren van een bestelling, kan op een knop ‘OPNIEUW’ worden geklikt om de bestelling te resetten en opnieuw te beginnen.

Overige functionele eisen:   
• In het overzicht worden alleen regels opgenomen voor producten die zijn besteld   
• Er mogen geen negatieve aantallen worden opgenomen in de bestelling   
• Als er nog geen productaantallen zijn ingevoerd, is het rechter blok leeg   
• Als een product wordt aangepast naar 0 stuks, verdwijnt de bestelling in het besteloverzicht (rechter blok)

[https://talnet.instructure.com/media\_objects\_iframe/m-5aCLxZqnohJPEKDnEHqsMXcHpt6rezai](https://talnet.instructure.com/media_objects_iframe/m-5aCLxZqnohJPEKDnEHqsMXcHpt6rezai "Voorbeeld")

<table border="2" id="bkmrk-functionaliteit-punt"><tbody><tr valign="top"><td width="77%"> **Functionaliteit**

</td><td width="23%"> **Punten**

</td></tr><tr valign="top"><td width="77%">Het scherm heeft een duidelijke verzorgde opmaak met een eigen stijl. De menulijst en de bestelling worden als twee blokken die naast elkaar staan weergegeven.

</td><td width="23%">20

</td></tr><tr valign="top"><td width="77%">De bestellijst geeft alleen de producten weer die worden besteld (dus waarvan het aantal bestellingen groter dan 0 is). In eerste instantie is de bestellijst leeg.

</td><td width="23%">20

</td></tr><tr valign="top"><td width="77%">Bij veranderen van een productaantal zie je een verandering op de bestellijst.

</td><td width="23%">10

</td></tr><tr valign="top"><td width="77%">De productregel op de bestellijst geeft zowel de prijs per product, het aantal en de totaal prijs voor dat product weer.

</td><td width="23%">10

</td></tr><tr valign="top"><td width="77%">Onder de bestelregels staat de totaalprijs van de hele bestelling.

</td><td width="23%">10

</td></tr><tr valign="top"><td width="77%">Na het klikken op de ‘opnieuw’-knop, wordt het scherm gereset en kan een nieuwe bestelling worden ingevoerd.

</td><td width="23%">10

</td></tr><tr valign="top"><td width="77%">Een besteld product dat na de bestelling weer op het aantal 0 wordt gezet, verdwijnt als regel in het blok van de bestelling.

</td><td width="23%">10

</td></tr><tr valign="top"><td width="77%">Het aantal bestellingen van een product kan niet negatief zijn.

</td><td width="23%">10

</td></tr></tbody></table>

### Inleveren

- Een HTML-bestand
- Een CSS-bestand
- Een JavaScript-bestand waarin je in commentaar uitlegt hoe de de verschillende onderdelen worden gemaakt.
- Een kort filmpje waarin je laat zien dat je een bestelling plaats van verschillende producten in je browser (zie: [ https://www.pocket-lint.com/nl-nl/apps/nieuws/microsoft/162032-hoe-neem-je-je-scherm-op-in-windows Links to an external site. ](https://www.pocket-lint.com/nl-nl/apps/nieuws/microsoft/162032-hoe-neem-je-je-scherm-op-in-windows) voor uitleg over het maken van een screenshot)