OPGAVER TIL HTML & CSS – JS – LOMMEREGNER
Opgave 7
Opgave 7 – Del 1
- Lav en ny pen i codepen.io
- Gå op i HTML boksen og skriv dette ind:
OBS! På linje 5 er der gjort plads til alle tasterne inde i “talButtons”. Dem sætter vi ind lidt senere.
Opgave 7 – Del 2
Vi går nu ned i vores CSS og beskriver vores klasse for lommeregner og id displaySvar
Opgave 7 – Del 3
Nu skal vi tilbage til HTML‘en. For vi skal lige have alle vores taster sat ind. Stil dig på linje 5 inde i talButtons div boksen og skriv nu dette ind.
Bemærk at sidste div har en id på sig for den skal vi bruge i JavaScript(JS) delen.
Opgave 7 – Del 4
Nu skal vi tilbage til vores CSS boks og skrive klassen ind for talButtons og at det gælder for alle div’erne i den.
Opgave 7 – Del 5
Vi bliver i CSS boksen. og tager nu fat på klassen for hver knap talButton.
Opgave 7 – Del 6
Nu er vi nået til JS delen! Den allersidste del i opgaven. Star med at skrive dine variabler ind. Læg mærke til at den 2. variabel er en Array med alle talButton tasterne i.
Opgave 7 – Del 7
Vi fortsætter i JS delen. I denne opgave arbejder vi med map. Da map skaber en Array ved at kalde en function for hvert enkelt elementerne(tasternes) i en originale array (let buttonsKnap) og gemmer i en ny array, ved at “lytte” til når vi trykker på en af tasterne.
Med switch (som er lidt som if/else statements) tager den det target(tasten du trykker på).
På linje 7 skal vi sætte in hvad de conditions er som switch skal agere ud fra.
Opgave 7 – Del 8
Stil dig på linje 7 i JS delen og skriv nu dette ind som står på billedets linje 7.
Her under er koden eksekveret uden JS delen.