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