Javascript

 OPGAVER TIL HTML & CSS – JS – OPGAVE 3

Opgave 3

Opgave 3 – Del 1

Først skal vi igennem disse trin for at skabe vores opgaver
  • Lav en ny pen i codepen.io
  • Start med at skrive efter billede 1 
  • Kopier derefter indholdet i den stor div og sæt det ind 3 gange under
  • HUSK at ændre på id’navnene og funktion navnene(se billede 2 som vejledning)
Brug 4 billede links til opgaven, hvor der skal sættes links ind(ved src=”billede”)
 

Opgave 3 – Del 2

Nu skal vi lave CSS’en for klassen bogstaver1.
 
Det skal se således ud:
.bogstaver1 {
  width: 80%;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  row-gap: 100px;
  display: grid;
}
 
Da vi skal have plads til 1 billede, svarboks, checkboks og resultatboks 2 gange på en linje, er det lavet 8 x auto. Auto gør at der ligeligt fordeles 8 rum lige store, som afhænger af skærmens brede.

Opgave 2 – Del 3

Nu skal vi lave CSS’en for klassen checkbox1.

.checkbox1 {
  position: auto;
  height: 30px;
  width: 30px;
  font-size: 20px;
  margin-left: 20px;
  text-transform: uppercase;
}    

Opgave 3 – Del 4

Nu skal vi style vores decode1 felt 🙂
.decode1 {
  background-color: purple;
  border-radius: 10px;
  border: 0;
  color: white;
  padding: 5px;
  height: 30px;
  width: 40px;
  cursor: pointer;
  box-shadow: 0 5px #999;
  margin-left: 10px;
}
.decode1:hover {
  background-color: black;
}
.decode1:active {
  background-color: black;
  box-shadow: 0 3px #666;
  transform: translateY(2px);
}
 
Dette er vores tjek knap (den lilla), der sender resultatet til outputboksen.

Opgave 3 – Del 5

Nu er vi nået til allersidste klasse nemlig svar1 klassen.
.svar1 {
  text-align:center;
  height: 30px;
  width: 30px;
  font-size: 20px;
  border-radius: 50%;
  margin-left: 10px;
}
 

Opgave 3 – Del 6

Nu er vi nået til JS delen – altså JavaScriptet😉
Her skal der laves 4 funktioner:
function calculateA1()
function calculateA2()
function calculateA3()
function calculateA4()
Vi laver function calculateA1() og så kan du kopiere den og ændre feedback tallene og hvilke bogstaver der skal skrives for resten.

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

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

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

   
     

Her under ses koden eksekveret.

   
 
Slange
Ananas
Appelsin
Agern