{"id":44753181,"url":"https://github.com/mjerta/frontend-react-tech-it-easy","last_synced_at":"2026-02-15T23:19:12.977Z","repository":{"id":248037376,"uuid":"827363798","full_name":"mjerta/frontend-react-tech-it-easy","owner":"mjerta","description":"novi-frontend-homework-week28","archived":false,"fork":false,"pushed_at":"2024-11-20T22:19:34.000Z","size":3645,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-20T22:50:08.405Z","etag":null,"topics":["html","javascript","nginx","react"],"latest_commit_sha":null,"homepage":"https://tech-it-easy.mpdev.nl/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mjerta.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-11T14:04:54.000Z","updated_at":"2024-11-20T22:19:37.000Z","dependencies_parsed_at":"2024-11-20T22:31:47.365Z","dependency_job_id":"66b7828d-19b1-4d0f-a07f-883889c842c8","html_url":"https://github.com/mjerta/frontend-react-tech-it-easy","commit_stats":null,"previous_names":["mjerta/frontend-react-tech-it-easy"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mjerta/frontend-react-tech-it-easy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjerta%2Ffrontend-react-tech-it-easy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjerta%2Ffrontend-react-tech-it-easy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjerta%2Ffrontend-react-tech-it-easy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjerta%2Ffrontend-react-tech-it-easy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mjerta","download_url":"https://codeload.github.com/mjerta/frontend-react-tech-it-easy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mjerta%2Ffrontend-react-tech-it-easy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29492107,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-15T19:29:10.908Z","status":"ssl_error","status_checked_at":"2026-02-15T19:29:10.419Z","response_time":118,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","javascript","nginx","react"],"created_at":"2026-02-15T23:19:12.286Z","updated_at":"2026-02-15T23:19:12.962Z","avatar_url":"https://github.com/mjerta.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Opdrachtbeschrijving\n\n## Inleiding\n\nJe bent net begonnen als developer bij een bedrijf genaamd _Tech It Easy_, dat TV's verkoopt. Recentelijk hebben ze Fred\nvan financieën ontslagen omdat hij telkens wel online was op Teams, maar eigenlijk dutjes deed en niets uitvoerde. Dit\nbetekent dat de medewerkers een financieel dashboard nodig hebben om zelf de administratie bij te houden.\n\nOmdat Fred al heel lang niets heeft uitgevoerd is het niet zo goed gesteld met de financieën. Je kunt er daarom vanuit\ngaan dat de voorraad met televisies op dit moment statisch is, maar in de toekomst dynamisch wordt.\n\n![Tech it easy](./src/assets/tech_it_easy.png)\n\nIn `constants/inventory.js` vind je 2 datasets. Eén object met de gegevens van de\nbestverkochte tv bij Tech It Easy en één array met 8 objecten (alle tv's die zij verkopen). Elk tv-object bevat de\nvolgende informatie:\n\n* `type` - het tv type\n* `brand` - het merk\n* `name` - de benaming\n* `price` - de prijs (_in hele euro's_)\n* `availableSizes` - een array met beschikbare schermgroottes voor dit model (_in inches_)\n* `refreshRate` - de beeldverversing (_in Hz_)\n* `screenType` - het type scherm (_LED - QLED - LCD_)\n* `screenQuality` - de resolutie van het scherm (_Ultra HD/4K - Full HD - HD Ready_)\n* `smartTv` - boolean waarde die aangeeft of het een Smart TV betreft\n* `options` - een array met objecten waarin met booleans is aangegeven welke opties wel en niet aanwezig zijn (_Wifi,\n  spraakbesturing, HDR, Bluetooth en AmiLight_)\n* `originalStock` - de hoeveelheid exemplaren van dit type die tijdens deze voorraad-batch zijn ingekocht\n* `sold` - de hoeveelheid verkochte exemplaren van dit type\n\n## Deel 1\n\nDoor de opdrachten te maken bouw je langzaam het eerste deel van het Tech It Easy Dashboard op. Je bent vrij om de\nstyling van het voorbeeld over te nemen, of jouw eigen huisstijl te bedenken. Zorg er wel voor dat je eerst aan de slag\ngaat met de technische opdrachten voor je jouw tijd besteed aan styling.\n\n![screenshot deel 1](./src/assets/screenshots/tech-it-easy-dashboard-deel-1.png)\n\n### Opdracht 1 - Helperfuncties\n\nJe zult in deze opdracht meerdere helperfuncties gaan schrijven die we gaan gebruiken om de juiste informatie op\nhet dashboard weer te geven. Je gebruikt hier de data uit de `inventory`-array voor. Deze vind je in de `constants`-map.\n_Tip:_ maak voor iedere helperfunctie een apart bestand en vergeet deze niet aan te roepen in `App.jsx`, anders blijft\nde console leeg!\n\n* **Opdracht 1a:** Hoeveel tv's zijn er al verkocht? Schrijf een helperfunctie die dit berekent. Log de uitkomst in de\n  console.\n* **Opdracht 1b:** Zorg ervoor dat dit aantal in het groen wordt weergegeven op de pagina.\n* **Opdracht 1c:** Hoeveel tv's heeft Tech It Easy in totaal ingekocht? Schrijf een helperfunctie die dit berekent. Log\n  de\n  uitkomst in de console.\n* **Opdracht 1d:** Zorg ervoor dat dit aantal in het blauw wordt weergegeven op de pagina.\n* **Opdracht 1e:** Schrijf een helperfunctie die berekent hoeveel tv's er nog verkocht moeten worden. Geef de uitkomst\n  in het rood weer op de pagina. _Tip:_ je kunt een helperfunctie gebruiken in een andere helperfunctie.\n\n### Opdracht 2 - Productweergave\n\nJe gaat verschillende helperfuncties schrijven om de informatie over één tv op de juiste manier op de pagina weer te\ngeven. Gebruik het `bestSellingTv`-object als input, maar houdt er rekening mee dat we hier ieder gewenst tv-object\nvoor moeten kunnen gebruiken. We gaan deze tv weergeven in het volgende format:\n\n```shell\nSamsung UHD 55AU7040 - Crystal\n€549,-\n43 inch (109 cm) | 50 inch (127 cm) | 55 inch (140 cm) | 65 inch (165 cm)\n```\n\n* **Opdracht 2a:** Maak een helperfunctie die een string genereert voor de naam van één tv en deze teruggeeft in het\n  format `[merk] [type] - [naam]` zoals _Philips 43PUS6504/12 - 4K TV_ of _NIKKEI NH3216SMART - HD smart TV_.\n\n* **Opdracht 2b:** Maak een helperfunctie die de prijs van één tv als parameter verwacht (zoals 379 of 159) teruggeeft\n  in het format _€379,-_ of _€159,-_.\n\n* **Opdracht 2c:** Maak een helperfunctie die een string genereert voor alle beschikbare schermgroottes van één tv. De\n  functie geeft dit terug in het format:\n\n```shell\n[schermgrootte] inches ([schermgrootte omgerekend]cm) | [schermgrootte] inches ([schermgrootte omgerekend]cm) etc.\n```\n\nAls een tv maar één schermgrootte heeft (`[32]`) wordt de output `32 inch (81 cm)`. Wanneer een tv vier schermgroottes\nheeft (`[43, 50, 55, 58]`) wordt de output `43 inch (109 cm) | 50 inch (127 cm) |\n58 inch (147 cm)`. Rond altijd af op hele centimeters. Test goed of dit werkt met verschillende tv's!\n\n* **Opdracht 2d:** Gebruik jouw helperfuncties om de informatie van de bestverkochte tv, inclusief afbeelding, op\n  de pagina weer te geven:\n\n![screenshot weergave best verkochte tv](./src/assets/screenshots/tech-it-easy-best-seller.png)\n\n* **Opdracht 2e:** gebruik de iconen uit de `assets`-map om weer te geven welke toepassingen aanwezig zijn op deze tv.\n  Doe dit voor nu nog even door de informatie zelf, handmatig\n  uit te typen (_hardcoded_).\n\n```shell\n[check-icon] wifi [not-icon] speech [check-icon] hdr [check-icon] bluetooth [not-icon] ambilight\n```\n\n* **Opdracht 2f:** Maak drie knoppen onderaan de pagina met daarop: 'Meest verkocht eerst', 'Goedkoopste eerst' en\n  'Meest geschikt voor sport eerst'. Wanneer een knop wordt aangeklikt, moet de button-tekst in de console gelogd\n  worden. _Tip:_ functies die worden uitgevoerd op basis van een event, declareer je altijd in het component zelf: dit\n  zijn geen helpers.\n\n## Deel 2\n\nJe gaat verschillende methodes gebruiken om de informatie over alle tv's op een zo efficient mogelijke manier weer te\ngeven.\nGebruik de `inventory`-array als input en houdt er rekening mee dat het niet uit moet maken of de array 8 of 800 tv's\nlang is.\n\n![screenshot deel 1](./src/assets/screenshots/tech-it-easy-dashboard-deel-2.png)\n\n### Opdracht 1 - Oefenen met array methodes\n\nVoordat we array methodes gaan toepassen in React, is het belangrijk om nog even te oefenen met deze methodes in 'plain'\nJavaScript. Maak de volgende opdrachten daarom in het `inventory.js` bestand, of maak zelf een eigen oefen-bestandje aan\nin diezelfde map. Je kunt de `inventory`-array dan gewoon importeren. Je hoeft hiervoor geen functies te maken.\nLog de uitkomsten telkens direct in de console.\n\n* **Opdracht 1a:** Gebruik een array-methode om een array te maken met daarin alle tv-type namen. Log de uitkomst in de\n  console.\n* **Opdracht 1b:** Gebruik een array-methode om alle informatie te verzamelen van de tv's die volledig uitverkocht\n  zijn. Log de uitkomst in de console.\n* **Opdracht 1c:** Gebruik een array-methode om de informatie van het tv-type 'NH3216SMART' op te halen.\n* **Opdracht 1d:** Gebruik een array-methode om een lijst te maken van de merk- en tv-namen waarbij aangegeven wordt of\n  deze geschikt zijn voor sport-kijkers (een verversingssnelheid van 100Hz of hoger). Doe dit in het\n  format `{ name: 'Toshiba HD TV', suitable: false }`. Log de uitkomst in de console.\n* **Opdracht 1e (uitdaging):** Gebruik array-methoden om alle informatie te verzamelen van de tv's die beschikbaar zijn\n  in\n  schermgroottes van 65 inch en groter.\n* **Opdracht 1f (uitdaging):** Gebruik array-methoden om alle informatie te verzamelen van de tv's die over\n  ambilight beschikken. Log de uitkomst in de console.\n\n### Opdracht 2 - Array methoden in de UI\n\n* **Opdracht 2a:** Gebruik een array-methode om alle tv merken (zoals Philips, NIKKEI, etc.) in een lijst op de pagina\n  weer te geven. Dit geeft het personeel een duidelijk overzicht van wat zij verkopen. Dat er dubbele merknamen in\n  komen, is niet erg.\n\n* **Opdracht 2b:** Gebruik een array-methode om alle tv's van Tech It Easy weer te geven in hetzelfde format als de best\n  verkochte tv. Gebruik hiervoor\n  ook de helperfuncties die je hebt gemaakt tijdens deel 1, maar sla de opties (zoals bluetooth, wifi, etc.) nog even\n  over.\n\n* **Opdracht 2c:** Gebruik opnieuw een array-methode om voor iedere tv alle optie-namen (zonder iconen) weer te geven in\n  een lijst.\n\n* **Opdracht 2d:** Voeg nu de iconen toe door gebruik te maken van een beslisboom binnen de methode. Wanneer de waarde\n  van de optie `true` is, willen we het check-icoon weergeven en wanneer de waarde van de optie `false` is, het\n  minus-icoon.\n\n### Opdracht 3 - Sorteren maar!\n\nWe kunnen de tv's helaas niet op de pagina laten sorteren door op de knoppen te klikken, daar\nhebben we namelijk _State_ voor nodig. Daarom log je de gesorteerde tv's in de console.\n\n* **Opdracht 3a:** Zorg ervoor dat wanneer een gebruiker op de 'Meest verkocht eerst'-knop klikt, de `inventory`-array\n  wordt\n  gesorteerd op aantal verkochte items van hoog naar laag. Log de uitkomst in de console.\n* **Opdracht 3b:** Zorg ervoor dat wanneer een gebruiker op de 'Goedkoopste eerst'-knop klikt, de `inventory`-array\n  wordt gesorteerd\n  op prijs van laag naar hoog. Log de uitkomst in de console.\n* **Opdracht 3c:** Zorg ervoor dat wanneer een gebruiker op 'Meest geschikt voor sport eerst'-knop klikt, de `inventory`\n  -array wordt\n  gesorteerd op verversingssnelheid van hoog naar laag. Log de uitkomst in de console.\n\n### Bonus\n\n* **Opdracht 1:** Maak nog een extra knop met daarop 'Grootste schermgroottes eerst'. Wanneer de gebruiker op deze knop\n  klikt, worden de tv's gesorteert op basis van hun grootste schermgrootte.\n* **Opdracht 2:** Sommige tv's zijn al uitverkocht. Om te voorkomen dat de medewerkers van Tech It Easy deze producten\n  nog proberen te verkopen, willen we die tv's voorzien van een 'uitverkocht'-plaatje. Om de afbeelding alleen te laten\n  zien als de conditie waar is, zul je de logica-operator `\u0026\u0026` moeten gebruiken:\n\n```javascript\nconditie \u0026\u0026 \u003celement dat weergegeven moet worden als TRUE\u003e\n```\n\nVoor de `?` plaats je de conditie die getoetst wordt (is de tv uitverkocht?). Als de conditie waar is, toon je het\nplaatje door dit element achter de `\u0026\u0026` te zetten (zonder '').","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmjerta%2Ffrontend-react-tech-it-easy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmjerta%2Ffrontend-react-tech-it-easy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmjerta%2Ffrontend-react-tech-it-easy/lists"}