HTML, CSS og JavaScript

vendespil

Baseret på første projekt i første semester af webudvikler uddannelsen, har jeg lavet en række vendespil. Forskellen på spillene er hvordan kortende bliver tilgået

HTML

Her blev kortende lavet i HTML som div elementer med to image files, en for forsiden og en for bagsiden. Kortende bliver sendt til JavaScript ved brug af  querySelectorAll hvorefter de blandes

JavaScript Object

Her placeres kort info i Js objects som er placeret i et array der pushes to gange til et andet array, hvor de blandes og derefter pushes og splices over i et andet array indtil der ikke er mere indhold i det originale array. Til sidst bliver det lavet om til kortene

JSON

Her i bliver kortene tilgået fra en JSON-fil gennem brug af fetch til at hente dataene asynkront, hvorefter den bliver brugt i javascript ligesom i Javascript object eksemplet.

scryfall APi

Dette er en side der er opbygget med scryfalls rest api

scryfall er en side der inholder information om alle magic the gathering kort der er blevet printet og deres api kan bruges til at tilgå denne data

simpel

Den første side jeg har lavet med denne api er opsat relativ simpelt.

Der bliver gjort brug af to fecth request med

  • https://api.scryfall.com/cards/autocomplete?q=
  • https://api.scryfall.com/cards/named?exact=

 

Autocomplete?q= bruges til at returnere en samling af op til 20 engelske kort navne baseret på inputtet placeret efter = 

Koden blev opsat med et input felt hvis indhold blev sendt til JavaScript og placeret i fetch bagefter =

Resultatet af dette bliver så pushed til et array

Arrayet bliver så looped gennem og for hvert kort navn bliver https://api.scryfall.com/cards/named?exact= fetched til at få detaljerede info om kortet, hvilket inkluderer billeder der bliver sat ind i HTML via innerHTML

Det eneste problem her var med kort der har to sider, da de har en anden data opsætning hvilket resultere i at det var nødvendigt at implementere en if funktion der kigger på om cardData inkludere card_faces og baseret på det bliver det sat op anderledes.