Responsiv kalkulator

Lag et responsivt webgrensesnitt for en kalkulator som lar brukeren skrive inn og evaluere matematiske uttrykk (f.eks., “10+5*2”). Kalkulatoren skal ha en enkelt visningsrute for input og resultat, og støtte de fire grunnleggende aritmetiske operasjonene: addisjon (+), subtraksjon (-), multiplikasjon (*) og divisjon (/). Den skal også inkludere funksjonalitet for å slette siste tegn, tømme visningen og håndtere desimaltall.

  • Enkel Visningsrute: Kalkulatoren skal ha ett enkelt tekstfelt (<input type="text" readonly>) for å vise både det pågående uttrykket som brukeren bygger opp og det endelige resultatet. Startverdien skal være “0”.
  • Tallknapper (0-9): Implementer knapper for sifrene 0 til 9. Når en tallknapp trykkes, skal sifferet legges til det nåværende uttrykket i visningsruten.
  • Operasjonsknapper (+, -, *, /): Implementer knapper for de fire grunnleggende aritmetiske operasjonene. Når en operasjonsknapp trykkes, skal operatoren legges til det nåværende uttrykket i visningsruten, forutsatt at det ikke allerede er en operator på slutten av uttrykket.
  • Desimalknapp (.): Implementer en knapp for desimalpunktum. Kun ett desimalpunktum skal tillates per tall.
  • “Equals”-knapp (=): Når denne knappen trykkes, skal hele det nåværende uttrykket evalueres, og resultatet skal vises i visningsruten. Implementer enkel feilhåndtering for ugyldige uttrykk (f.eks., vis “Error”).
  • “Clear”-knapp (C): Når denne knappen trykkes, skal visningsruten tilbakestilles til “0”.
  • “Delete”-knapp (DEL): Når denne knappen trykkes, skal det siste tegnet i uttrykket fjernes fra visningsruten. Hvis visningen er tom, skal den settes til “0”.
  • Responsivt Layout: Kalkulatoren skal ha et responsivt layout som fungerer godt på ulike skjermstørrelser (desktop, nettbrett, mobil). Bruk CSS media queries og fleksible layoutteknikker (Flexbox eller CSS Grid) for å sikre at kalkulatoren er leselig og brukervennlig på alle enheter. Knappene skal være store nok til å enkelt kunne trykkes, spesielt på touch-enheter.
  • Visuell Design: Kalkulatoren skal ha et oversiktlig og brukervennlig visuelt design. Velg passende farger, fontstørrelser og avstander for god lesbarhet og en behagelig brukeropplevelse på alle skjermstørrelser.

Hint og veiledning

  • Start med å lage HTML-strukturen for kalkulatoren med ett input-felt og alle nødvendige knapper. Bruk klasser for å style knappene (f.eks., for operatorer og equals-knappen).
  • Bruk CSS Grid for å lage layoutet for knappene.
  • Implementer JavaScript-funksjoner for hver knapp for å håndtere input til visningsruten og logikken for beregning. Vær forsiktig med bruken av eval() og vær klar over de potensielle sikkerhetsrisikoene i en produksjonsapplikasjon. For denne oppgaven er det akseptabelt for enkel evaluering.
  • Bruk media queries i CSS for å justere layout, fontstørrelser og knappestørrelser for forskjellige skjermbredder.

Vurderingskriterier

  • Korrekt implementering av alle funksjonelle krav (tall, operatorer, desimal, equals, clear, delete).
  • Evnen til å bygge opp og evaluere matematiske uttrykk korrekt.
  • God håndtering av desimaltall og potensielle feilsituasjoner.
  • Effektiv bruk av Flexbox eller CSS Grid for responsivt layout.
  • Velvalgte og hensiktsmessige brytepunkter for responsiv design.
  • God lesbarhet og brukervennlighet på ulike skjermstørrelser.
  • Touchvennlighet på mindre skjermer.
  • Oversiktlig og konsistent visuelt design på alle skjermstørrelser.

Forslag til løsning

Relaterte kompetansemål

  • veilede brukere i ulike oppgaver
  • utvikle og tilpasse brukergrensesnitt som ivaretar krav til universell utforming
  • feilsøke kode og rette feil i algoritmer og kode
  • utforske og vurdere eksisterende og nye teknologier og bransjerelevante kodespråk

Relaterte emner