Siden er hostet via github pages: https://kamillamortensen.github.io/contrastMatch/

Hvordan kjøre koden i development-modus fra datamaskinen!

Slik gjør du

1. Clone repository fra git
2. Gå inn i mappen i treminal

Du må ha npm/node installert på maskinen for de neste to trinn:

3. Kjør npm install for å installere avhengigheter
4. Kjør npm start for å starte
5. Nå burde siden komme opp i nettleseren automatisk, eller du kan åpne http://localhost:3000 i nettleseren!

Når du gjør endringer i koden skal localhost:3000 oppdateres automatisk.

Hvordan deploye react-koden til github pages

Det du må gjøre i dette prosjektet er å sørge for at du og den nye koden er på master branch. Deretter kan du kjøre npm run deploy fra terminalen, og siden skal oppdateres!
Tutorial til oppsett og endring av host-side: https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/

Litt om systemet!

Mappestruktur / arkitektur

Inne i mappen til prosjektet ser det slik ut om du åpner den i en fil-editor:

• Components inneholder alle komponentene som er i appen. Komponenter er biter med kode som kan brukes flere steder. Eksempler er meny, knapp, inputfelt, el.
• Pages er sidene i appen. I dette tilfellet er det alle sider som kan lastes når du skriver "nesside.no/xxxx" i nettleseren. Eksempler er Home (der vi sjekker kontrast) og About (her planla jeg å ha info om wcag, men ble aldri brukt)
• color-checker.js er viktig: den inneholder koden som finner kontrastene mellom farger. Er hentet fra https://colorcontrast.dev/api/
• contrast-calbulations.js er en fil med andre metoder som gjør diverse kalkulasjoner som har med fargekontraster å gjøre
• viarbles.css og variables.js er filer som inneholder variabler som går igjen på tvers av sider og filer. Endres de, så endres variablen alle steder de har blitt brukt.

Bibliotek / dependencies

react i18next er brukt for å enkelt kunne oversette siden mellom norsk og andre språk om det skulle bli ønskelig. Lenke: https://react.i18next.com/

Mui material icons er bruk for å vise profesjonelle ikoner. Se ikonene: https://mui.com/material-ui/material-icons/?query=text og les litt om hvordan de brukes i react: https://blog.wrappixel.com/how-to-use-mui-icons-in-react/.

react-undraw-illustrations er brukt for å vise illustrasjoner med de fargene som brukeren har valgt ut.
React-undraw-illustrations tar inn illustrasjoner med FRI LISENS og gjør dem om til react-komponenter så det er enkelt å bruke dem og gjøre justeringer som å endre farge.
Illustrasjonene kommer fra Undraw, en side hvor du kan finne svg-animasjoner på fri lisens: https://undraw.co/
Biblioteket har ikke alle illustrasjonene som Undraw har, men utvalget finnes her: https://graemefulton.github.io/.
En god bruksanvisning for hvordan man bruker komponentene er her: https://github.com/GraemeFulton/react-undraw-illustrations.