Skip to content

Latest commit

 

History

History
80 lines (56 loc) · 2.82 KB

03-lite-program.md

File metadata and controls

80 lines (56 loc) · 2.82 KB

Et lite program

I denne oppgaven skal du lage et lite grensesnitt som ser ut som en kalkulator. Grensesnittet bygges opp av HTML og styles med CSS, og til slutt bruker vi JavaScript til å få den til å fungere som en nedteller.

Hvis du alternativt vil programmere den som en faktisk kalkulator, må du gjerne gjøre det også.

OBS! Når man først begynner å knote med CSS, kan man bruke en evighet på å få det akkurat som man vil. I denne oppgaven kan det være fint å gå videre til JavaScript-delen når du er middels fornøyd med HTML og CSS, og heller gå tilbake til å fikse på hvordan den ser ut når nedtelleren er funksjonell.

Sett opp nedtelleren

  • Ta utgangspunkt i HTMLen og CSSen i nedteller-mappa under assignments i dette repoet
  • Gi main-elementet en bredde og midtstill det.
  • Midtstill teksten til telleren.
  • Gjør noen av de første oppgavene om Flexbox Froggy, og prøv deretter å bruk det du har lært om flexbox på beholderen med alle knappene for å få dem til å ligge som vist på bildet under.

Farger:

  • Gråfarge: #262626
  • Rødfarge: #fd5158

Style element state på nedtelleren

  • Midtstill og style start-knappen.
  • Endre bakgrunnsfarge på knappene ved hover
  • Legg til fokusmarkering for tabbing
  • Endre musepeker til en hånd ved hover

Bruk JavaScript til å interagere med nedtelleren

Dere skal gjøre nedtelleren interaktiv!

  • Lag en JavaScript-fil som du inkluderer nederst i <body> i HTMLen din.
  • Legg til en klikk-listener på .buttons
  • Om en knapp ble trykket på, legg til verdien til knappen i output

Hint

Husk hvordan man la til event listeners på en knapp:

<button id="btn">Knapp</button>
const button = document.querySelector('#btn');
button.addEventListener('click', function() {
    console.log('heia');
});

Hint

Man trenger ikke å legge på event listener på hver eneste knapp, i stedet kan vi benytte oss av noe som heter event propagation: Et klikk på et element vil boble opp og trigge event på elementene over. Med følgende kodesnutt kan du logge typen element som har trigget et event.

const container = document.querySelector('.buttons');
container.addEventListener('click', function(event) {
    const element = event.target;
    console.log(element.nodeName); // => BUTTON eller DIV
});

Implementer nedtelling

  • Starte nedtelling fra tallet i nedtelleren når du trykker på start
  • Stoppe nedtelling når tallet kommer til null

Hint

function enFunksjon() {
    console.log('Jeg printer til konsollet');
}
const id = setInterval(enFunksjon, 1000);
clearInterval(id);