Handleliste app

Når jeg skulle begynne med brukergrensesnittet startet jeg med å finne en fargepalett og bestemme meg for en font. Får å velge farger velgte jeg å bruke en nettsiden https://coolors.co/. Dette var fordi siden generere forskjellige fargepalett som jeg kan bruke som inspirasjon.

Når jeg valgte font brukt jeg roboto fordi det er en ren og moderne font som er lett leselig som var spesifikt designet for telefoner som passer bra til en handleliste nettside.

Ikonene til komponentene var tegnet selv. Dette var fordi jeg ikke skulle ha mange ikoner og da kunne det fort ta meg lengre tid å finne ikoner jeg kunne bruke på nett istedenfor å heller tegne dem selv.

Når jeg startet å lage prototypen fokuserte jeg på hvordan jeg kunne lage handleliste så enkel å forstå så mulig. Da valgte jeg å ha et rent og enkelt utsende. Alle knappene på nettsiden er også 48px minimum får ha det enkelt for alle å trykke på. Med store font størrelser i tillegg til at hele nettsiden er skalerbar til under 320px bredde.

I Javascript filen jeg passet på å gjøre hele shopping listen mulig å navigere kun med tastatur hvis man foretrekker det og for enkelhets skyld kan man trykke enter når input feltet på nettsiden er markert får å legge til ting i listen. På søpplebøtte ikonet jeg har på nettsiden la jeg til en mouseover effekt som endrer ikonet får å gjøre det mer tydelig at ikonet er markert og samtidig er hover effekten kun aktiv på pc får å ikke skape problemer på telefon.

Jeg har også inkludert local storage i Javascript filen sånn at det er mulig for folk å bruke nettsiden legge til tingene de skal kjøpe også senere åpne nettsiden igjen får å hentet tilbake samme liste.

For meg var det ganske problematisk å få lagd local storage i denne oppgaven fordi jeg aldri har jobbet med JavaScript før denne oppgaven i tillegg måtte jeg lage en array ut av alt jeg skulle lagre i local storage.

Originalt når jeg implementerte local storage lagret jeg bare html, men siden det er en usikker måte å gjøre det på måtte jeg finne andre løsninger og da ble svaret å konvertere elementer fra html filen over til string. Første variant av dette hadde jeg to funksjoner til å legge til elementer i html og en for å ta html elementene og konvertere det over til string som ble lagret i local storage. Dette var et ueffektivt system der jeg måtte repetere alt jeg hadde i html og local storage funksjon to ganger. I den siste versjonen jeg bruker nå har jeg fått blandet html funksjonen sammen med local storage funksjonen sånn at jeg ungår mest mulig repetisjon.