Commit f2467917 authored by Noran Baskaran's avatar Noran Baskaran
Browse files

Wrote documentation for styling the webapp

parent 3c3d5a29
......@@ -18,10 +18,14 @@ Vi har en mappestruktur som skiller ulike deler av kodebasen:
*PoetryAPI.ts* inneholder funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html). De ulike endepunktene som brukes ligger i en array lokaliser i funksjonen. Nettsiden henter de samme diktene hver gang. Vi valgte spesifikt relativt korte dikt, da noen av diktene var unødvendig lange.
## Mulige brukerinteraksjoner
## Mulige brukerinteraksjoner
En av parameterne som er tilgjengelig er å la brukeren kunne forandre på nettsidens tema som bytter fargene på nettsiden til en lysere eller mørkere farge palett. Ved bytting av tema vil de synlige komponentene dynamisk få light theme klasser og når du bytter til mørkt så blir klassene fjernet fra disse komponentene slik at de får dark-theme igjen.
## Styling og utforming
For å utforme en responsive nettside som ser bra ut på laptop, tablet og mobil så har vi brukt media queries. På laptop og skjermer større en 800px, synes vi det ser bra ut at teksten er på venstresiden av maleriet, men går den under 800px så passet det bedre at teksten gikk under maleriet. Du vil også legge merke til at både i mobil og tablet størrelse, så vil de øverste knappene utvide seg til 100% av lengden og legge seg under hverandre som gjør at det estetisk ser mer organisert ut for mindre skjermer. Denne oppførselen oppnådde vi med flexbox. Knappene for å skifte farge på maleriet og knappen for å legge til i favoritt, har vi rett over maleriet på samme linje for å sørge for at de er lett tilgjengelig når brukeren ser på maleriet og finner en favoritt kombinasjon. På skjermer under 550px synes vi det blir litt for lite bredde at her tenker vi det passer best å skalere maleriet for å passe mobil skjermer. Viewport er satt i index.html, og gjennom media queries så bruker vi viewport enheter for å sette bredde og lengde.
## Testing
Testene er lokalisert i <em>__ tests __ <em> mappen. Der ligger en snapshottest for *App.tsx* og en testcase som tester at funksjonen som henter dikt fra [poetryDB](https://poetrydb.org/index.html) henter fem dikt. I og med at arrayen med URLer inneholder fem forskjellige, så vil å teste at funksjonen returnerer en array med fem dikt vise at alle diktene ble hentet.
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment