Javascript

 OPGAVER TIL HTML & CSS – JS – OPGAVE 2

Opgave 2

Opgave 2 – Del 1

Først skal vi igennem disse trin for at skabe vores opgaver
  • Lav en ny pen i codepen.io
  • Lav en 1 tabel med tr og th tags 
  • Således her

    < table class=”column1″ align=”left” >
      < tr >
        < th class=”stykke1″ >
          Hvad er 3 x 4
        < /th >
      < /tr >
    < /table >

Table er tabellen, tr er tabeltækkerne og th er tabeloverskrifterne. Tag nu det der er skrevet med fed og kopier dette. Sæt det ind så ind under < /tr > 3 gange, så du har fire rækker i din tabel.

Opgave 2 – Del 2

Nu skal vi tilrette HTML koden så rækkerne indeholder inputs, en knap og tekst:
Det skal se således ud(se billedet)

Vores inputs er af typen tekst, prøv evt at ændre det til number. Den har et navn og id, som vi skal bruge til vores JS kode og tilføjet en klasse til at style den i CSS’en.

Vores knap(button) har en klasse på til at style den i CSS’en og en onclick function. Funktionen hedder det samme i JS, som vi referer til

HUSK der altid skal være () parenteser efter navnet på funktionen, både i HTML’en og i JS’en.

Opgave 2 – Del 3

Nu laver vi stylingen i CSS’en.

.column1 {
  padding: 15px;
  box-shadow: 2px 2px 5px grey;
}
.stykke1 {
  font-size: 24px;
}
.text1 {
  text-align:center;
  font-size:20px;
}
.answer {
  text-align:center;
  font-size:20px;
}
.decode{
  background-color: purple;
  border-radius: 30px;
  border: 0;
  color: white;
  padding: 10px;
  width: 110px;
  cursor: pointer;
  box-shadow: 0 5px #999;
  margin-left: 30px;
  margin-top: 10px;
}
.decode:hover {
  background-color: black;
  padding: 10px;
  width: 120px;
  margin-left: 30px;
}
.decode:active {
  background-color: black;
  box-shadow: 0 3px #666;
  transform: translateY(2px);
}    

Brug gerne dine egne farver og juster på skyggen(shadow) af knappen, fx ved at tilføje 5px efter 3px.

Opgave 2 – Del 4

Nu er vi færdige med CSS delen og skal nu til at lave JS delen 🙂
function calculate1() {
}
 
Herinde i skal vi tage input, fortælle hvad svaret skal være og tjekke efter om svaret passer, for derefter at sende værdi og farve til output.

Vi starter med at lave en var(variable) som vi kalder feedback1 den er det samme som vores id totalt1, altså det man man skriver ind.

Så laver vi en if statement, hvis feedback1 er det samme som 12, så skal vores outputs id(feedback1) skifte baggrundsfarve og få værdien 1.

Ellers så skal den være rød og have 0 i værdi.

Til sidst sender vi værdierne til vores output boks med værdien(value) for svaret.

Opgave 2 – Del 5

Nu har du lavet 1 regnestykke. Nu kan du kopiere hele din HTML kode tabel, og sætte den ind på linje 23 så du har 2 og igen herefter så du har 3 regnestykker.
 Sørg for at ændre id’ernes tal til 2 i tabel 2 og 3 i tabel 3. Fx hedder id=”total1″ nu id=”total2″ for tabel 2 og i 3. tabel id=”total3″. Samme gælder for calculate1() og feedback1, disse skal også har 2 og 3 i stedet.
 

Opgave 2 – Del 6

Du kan nu kopiere din JS kode også og omdøbe funktionernes navne til calculate2() og calculate3() og ændre id’erne til de 2 ekstra funktioner så de passer til dem i tabel 2 og 3 😉

Opgave 2 – Del 7

Nu skal vi så lave en sidste tabel for den som indhenter de samlede svar og tjekker om alle opgaver er regnet rigtigt ud. Denne tabel har kun 3 tabelrækker.
Husk at ændre id'erne hvis du kopier din tabel igen

Opgave 2 – Del 8

Nu skal vi så lave den sidste funktion i JS for den som indhenter de samlede svar og tjekker om alle opgaver er regnet rigtigt ud. 
   
     

Her under ses koden eksekveret.

   
 
Hvad er 3 x 4
Udregning:

Svar:
Hvad er 3 + 5
Udregning:

Svar:
Hvad er 8 - 5
Udregning:

Svar:
Tjek din top score!

Resultat: