Je bent net begonnen als developer bij een bedrijf genaamd Tech It Easy, dat TV's verkoopt. Recentelijk hebben ze Fred van financieën ontslagen omdat hij telkens wel online was op Teams, maar eigenlijk dutjes deed en niets uitvoerde. Dit betekent dat de medewerkers een financieel dashboard nodig hebben om zelf de administratie bij te houden.

Omdat Fred al heel lang niets heeft uitgevoerd is het niet zo goed gesteld met de financieën. Je kunt er daarom vanuit gaan dat Tech It Easy pas voorraad aanvult als alle producten zijn verkocht.

In de inventory array (in main.js) vind je 8 tv-objecten. Elk tv-object bevat de volgende informatie:

• type - het tv type
• brand - het merk
• name - de benaming
• price - de prijs (in hele euro's)
• availableSizes - een array met beschikbare schermgroottes voor dit model (in inches)
• refreshRate - de beeldverversing (in Hz)
• screenType - het type scherm (LED - QLED - LCD)
• screenQuality - de resolutie van het scherm (Ultra HD/4K - Full HD - HD Ready)
• smartTv - boolean waarde die aangeeft of het een Smart TV betreft
• options - een object met opties, waarin met booleans is aangegeven welke opties wel en niet aanwezig zijn (wiFi, spraakbesturing, HDR, Bluetooth en AmiLight)
• originalStock - de hoeveelheid exemplaren van dit type die tijdens deze voorraad-batch zijn ingekocht
• sold - de hoeveelheid verkochte exemplaren van dit type

1. Koppel jouw javaScript bestand met de HTML pagina. Doe dit ook voor het CSS bestand.
2. Voel je vrij om voor iedere opdracht een nieuw .js bestand te maken indien jouw bestand anders te groot wordt. Houdt er wel rekening mee dat je ieder afzonderlijk .js bestand moet koppelen via een <script>-tag in de HTML.
3. Vergeet niet dat je bij iedere wijziging eerst moet opslaan en de browser moet refreshen. Nodemon is niet meer nodig omdat we JavaScript nu in de browser gaan gebruiken (waar het voor bedoeld is)
4. Schrijf voor alle onderstaande opdrachten eerst stap voor stap de psuedo-code uit.

• Opdracht 1a: Gebruik een array-methode om een array te maken met alle tv-type namen. Log de uitkomst in de console.
• Opdracht 1b: Gebruik een array-methode om alle tv's te verzamelen (de hele objecten) die volledig uitverkocht zijn. Log de uitkomst in de console.
• Opdracht 1c: Gebruik een array-methode om alle tv's te verzamelen (de hele objecten) die over AmbiLight beschikken. Log de uitkomst in de console.
• Opdracht 1d: Schrijf een functie die alle tv's van laagste naar hoogste prijs sorteert. Log de uitkomst in de console.

Tip: wanneer we meerdere waardes uit een array willen terugbrengen tot één getal of één string, gebruik je hier gewoon een oude vertrouwde for-loop voor!

• Opdracht 2a: Hoeveel tv's zijn er al verkocht? Schrijf een script dat dit berekent. Log de uitkomst in de console.
• Opdracht 2b: Zorg ervoor dat dit aantal in het groen wordt weergegeven op de pagina.
• Opdracht 2c: Hoeveel tv's heeft Tech It Easy ingekocht? Schrijf een script dat dit berekent. Log de uitkomst in de console.
• Opdracht 2d: Zorg ervoor dat dit aantal in het blauw wordt weergegeven op de pagina.
• Opdracht 2e: Geef in het rood weer hoeveel tv's er nog verkocht moeten worden.

• Opdracht 3a: Gebruik een array-methode om alle tv merken (zoals Philips, NIKKEI, etc.) in een lijst op de pagina weer te geven. Zorg ervoor dat dit ook zou werken als we 200 tv's in onze array zouden hebben staan. Dat er dubbele namen in zitten, is niet erg.
• Opdracht 3b: Schrijf de code uit 3a om naar een functie die een array met tv-objecten verwacht. Het is handig om onze scripts als functies op te zetten, zodat we ze gemakkelijk kunnen hergebruiken. Tip: vergeet deze functie -declaratie niet aan te roepen!

Maak deze gehele opdracht eerst alsof je het voor één tv doet. We gaan één tv weergeven in het volgende format:

Philips 43PUS6504/12 - 4K TV
€379,-
43 inch (109 cm) | 50 inch (127 cm) | 58 inch (147 cm)

• Opdracht 4a: Maak een herbruikbare functie die een string genereert voor de naam van één tv en deze teruggeeft in het format [merk] [type] - [naam] zoals Philips 43PUS6504/12 - 4K TV of NIKKEI NH3216SMART - HD smart TV.

• Opdracht 4b: Maak een herbruikbare functie die de prijs van één tv als parameter verwacht (zoals 379 of 159) teruggeeft in het format €379,- of €159,-.

• Opdracht 4c: Maak een herbruikbare functie die een string genereert voor alle beschikbare schermgroottes van één tv. De functie geeft dit terug in het format [schermgrootte] inches ([schermgrootte omgerekend]cm) | [schermgrootte] inches ([schermgrootte omgerekend]cm) etc. Als een tv maar één schermgrootte heeft ([32]) wordt de output 32 inch (81 cm). Wanneer een tv vier schermgroottes heeft ([43, 50, 55, 58]) wordt de output 43 inch (109 cm) | 50 inch (127 cm) | 58 inch (147 cm). Let op: om één string te genereren uit een array van schermgroottes zul je een for-loop voor moeten gebruiken.

• Opdracht 4d: Schrijf een script die de informatie van de Philips 43PUS6504/12 tv weergeeft op de pagina zoals onderstaand voorbeeld. Gebruik de functies die je hebt gemaakt in opdracht 4a, 4b en 4c.

  Philips 43PUS6504/12 - 4K TV
  €379,-
  43 inch (109 cm) | 50 inch (127 cm) | 58 inch (147 cm)
  

• Opdracht 4e: Maak een herbruikbare functie die de informatie van alle tv's weergeeft op de pagina. Gebruik hiervoor de map-methode in combinatie met de functies die je hebt gemaakt in opdracht 4a, 4b en 4c.

1. Maak drie knoppen op de pagina: Sorteer op prijs, AmbiLight TV's en Uitverkochte exemplaren. Gebruik de code die je in opdracht 1b, 1c en 1d hebt gemaakt en schrijf dit om naar functies zodat je ze kunt aanroepen op het moment dat de buttons geklikt worden. Zorg ervoor dat de functies de uitkomsten in de de console loggen als de gebruiker op de bijbehorende knop klikt. Tip: lees hiervoor paragraaf 7.4 op EdHub eens door!
2. Zorg er nu voor, in plaats van dat de uitkomsten in de console worden gelogd, dat de uitkomsten worden meegegeven aan jouw functie uit 4e zodat de resultaten daadwerkelijk op de pagina weergegeven worden!