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
|
Functionaliteit |
Punten |
|
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. |
20 |
|
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. |
20 |
|
Bij veranderen van een productaantal zie je een verandering op de bestellijst. |
10 |
|
De productregel op de bestellijst geeft zowel de prijs per product, het aantal en de totaal prijs voor dat product weer. |
10 |
|
Onder de bestelregels staat de totaalprijs van de hele bestelling. |
10 |
|
Na het klikken op de ‘opnieuw’-knop, wordt het scherm gereset en kan een nieuwe bestelling worden ingevoerd. |
10 |
|
Een besteld product dat na de bestelling weer op het aantal 0 wordt gezet, verdwijnt als regel in het blok van de bestelling. |
10 |
|
Het aantal bestellingen van een product kan niet negatief zijn. |
10 |
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. voor uitleg over het maken van een screenshot)