Kop 1

In deze reeks van video's keren we terug naar de training https://blanken5.home.xs4all.nl/sorteerJSON.html. We leren hier dat we de uitvoer op een heel andere manier kunnen doen. Die behoefte ontstond na een plan om een stapje te maken richting een webshop.
Er wordt ook anders gesorteerd: meer op relevantere sorteerzaken, zoals op de achternaam van de auteur en het eerste belangrijkste woord van de boektitel.

Achteraf gezien had dit sorteerwerk natuurlijk beter direct op deze manier gemaakt kunnen worden. Bedenk dus dat het maken van een script een goede plan vereist zodat je dan sneller tot een goed resultaat komt.

Leerdoelen

• opfrissen sorteeropdracht
• DOM creatie met JavaScript
  • document.createElement();
  • .className();
  • .setAttribute();
  • .textContent
  • .appendChild();
• herhaling CSS Grid layout

JSON beter uitvoeren 1: het resultaat (00:02:35)

De JSON-data hebben we in een eerdere tutorial in een tabel uitgevoerd.
Die uitvoer gaan we op een aantal vlakken verbeteren.
De uitvoer van boektitels sorteren we hier op het eerste relevante woord. Lidwoorden als 'de' en 'een' zijn voor gebruikers niet zulke relevante sorteertermen, terwijl ze wel in de titel weergeven moeten blijven.
Hetzelfde geldt voor de auteurs. Het sorteren gaat op achternaam, terwijl de weergave op voor- en achternaam is.
Er wordt van een andere opbouw in de JSON gebruik gemaakt.
De JSON staat op: https://github.com/Theo-denBlanken/boekJSON/blob/master/boeken.json
Ook de prijs wordt weergegeven in een notatie met komma en natuurlijk sorteerbaar.

Tabelweergave kan overzicht geven, maar is niet responsive en soms is het wenselijk de cover naast de informatie te hebben.

JSON beter uitvoeren 2: opnieuw opbouwen met JavaScript (00:16:01)

De uitvoer wordt opnieuw opgebouwd.
Dat gaat niet meer met een HTML-tabel, maar per item wordt met JS een section-element gemaakt. Dit loopt dan nog steeds in de forEach-loop voor elke object uit de data-array.
Dit kan met document.createElement().
Dat zit in een aangemaakte variabele, die we met .className een class geven in overeenstemming met de BEM-conventie.
Deze section kan met .appendChild() worden toegevoegd aan het juiste element in de DOM.
voordat dit gebeurd, maken we nieuwe elementen en voegen die toe aan de section.

We beginnen met de afbeelding.
Met .setAttribute() kunnen dit image-element ook nog voorzien van het src-attribuut en het alt-attribuut. De waarden van die attributen komen uit onze data-variabele.
Ook wordt van elk boek een kop-element met de titel gemaakt.

JSON beter uitvoeren 3: elementen naast elkaar (00:11:27)

Er komen hier al wat meer elementen in elke sectie. Eerst blijkt nog dat voor het maken en toevoegen van elementen de uitvoer eerst meegemaakt moet worden, omdat bij elke sorteeractie uitgevoerd wordt en hier alleen maar elementen toegevoegd worden.
Hier wordt de prijs toegevoegd en een main element. De kop wordt in dit main element geplaatst. Alle elementen krijgen class-namen volgens de BEM-conventie.
de inhoud komt uit het data-object zoals in de vorige trainin met gebruik van .textContent. In latere filmpjes ook de auteurs en de overige informatie.

Doordat elke sectie een image, main een div met de prijs hebben, kun je met CSS Grid deze 3 eenvoudig naast elkaar plaatsen. Geef de section display:grid en grid-template-colomuns een waarde van auto 1fr auto. Daarmee krijgen de cover en de prijs de kolombreedte die ze nodig hebben en is de rest voor de informatie.
Grid-gap voor de gewenste afstanden inzetten.

JSON beter uitvoeren 4: tekst omgekeerd uitvoeren (00:10:00)

Het sorteren van de titels gaat nu meer op het eerste belangrijke woord in de titel.
Dit komt omdat in de JSON het minder belangrijke del van de titel voorzien van een komma achter aan gezet is.
Voor de weergave moet dit worden omgedraaid.
Daarvoor maken we een functie die van een string met de komma via .split() dit omzet in een array. In dit geval is de komma het scheidingsakten en alles daarvoor wordt het eerste item, alles daarna het tweede item. Uit die 2 doen bouw je dan een string op in de goede volgorde.
Die functie laat je dan in de uitvoer los op de boektitel.

JSON beter uitvoeren 5: sorteren op kapitalen (00:06:30)

In de titels sorteren niet naar wens. JavaScript geeft inhoud, die met onderkast begint in het sorteren een lagere waarde dan de Z. Omdat sommige titels door de omkering met onderkasten beginnen komen ze op de laatste plaats.
Voordat er gesorteerd gaat worden maken we van de titels een versie erbij in kapitalen en laten we daarop sorteren. Dat kan eenvoudig met .toUpperCase();.

JSON beter uitvoeren 6: auteurs toevoegen en sorteren (00:10:21)

De auteurs staan in de data in een aparte array. Daarvan is de eerste auteur de belangrijkste. Om te sorteren op achternaam is deze weer met komma omgekeerd in de JSON.
We maken weer een p-element met passende class-naam om daarin de array als een zinnetje uit te voeren. In de vorige reeks hebben we die functie gemaakt.
Om te kunnen sorteren maken we voor elk item uit de array nog een extra eigenschap uit het eerste item uit de array.
Terug in de uitvoer gaan we het eerste element van die uitvoer omkeren voor een leesbaarder resultaat.

JSON beter uitvoeren 7: prijsformaat en overige informatie (00:12:35)

De prijs ziet er nog niet uit zoals we dat in Nederland gewend zijn.
JS kan dat met een voorgedefinieerde functie omzetten.
Deze staat op: https://www.freeformatter.com/netherlands-standards-code-snippets.html Dit kunnen we dan in de uitvoer rechtstreeks loslaten op de waarde van de prijs in de data.
Ook de overige informatie wordt uit de data gehaald en in een paragraaf element geplaatst.

JSON beter uitvoeren 8: stijlen en responsive met CSS Grid (00:12:00

Elementen kunnen met CSS worden opgemaakt.
Bij de koppen en paragrafen verwijderen we de marge, zodat ze netjes aan de rand geplaatst kunnen worden.
De 3 elementen in het main element kunnen verticaal uit elkaar geplaatst worden door de main een display: grid te geven.
Omdat we verticaal verdelen, maken we een grid-template-rows verdeling. De waarde is auto 1fr auto, zodat de 'overige informatie' onderaan komt te staan.

De even elementen kunnen een grijze achtergrond krijgen. We selecteren ze met :nth-child(even).
Voor bredere schermen maken we een mediaquery waarbij die achtergrond weer weg moet.
De even sections krijgen een achtergrond met de waarde inherit.
Nu wordt elke tweede sectie van de vier en elke derde sectie van de 4 van een achtergrondkleur voorzien.

naschrift

De belangrijkste reden voor het omzetten van de manier van uitvoeren is niet eens aan de orde geweest.
Op deze manier kunnen we ook nog een knop toevoegen met een event, die specifiek blijft voor dat boek.
daarmee kun je in een komende tutorial stappen nar een webwinkel zetten!

Heb je ook opgemerkt dat er geen letter of leesteken aan de sorteerfunctie is gewijzigd en er toch heel anders gesorteerd wordt?
Kijk ook nog eens terug welke zaken voor het sorteren aangepast zijn en welke in de uitvoer. Op zich had dat ook in de vorige training gekund.

Bonusopdracht

Probeer zelf een mediaquery toe te voegen voor 3 koloms-layout waarbij er een afwisselende achtergrond komt.

Inleveren

• Na afloop plaats je deze training online in je bewijzenmap;
• Valideer jouw pagina's op Markup Validation Service van W3C.
• De validatie icoontjes staan al in de footer. Code vind je bij https://github.com/Theo-denBlanken/validatie-W3C;
• Plaats jouw uitwerking op in een aparte repository op GitHub
• Maak in jouw GitHub-repo een README.md met daarin temnminste een link naar jouw online uitwerking.
• Plaats de GitHub-link in ELO Magister.