Javascript

 OPGAVER TIL HTML & CSS – JS – OPGAVE 4

Opgave 4a og 4b

Opgave 4a – Del 1

Først skal vi igennem disse trin
  • Lav en ny pen i codepen.io
  • Først skal vi have lavet en div boks til teksten 
  • Start i HTML’en med at skrive dette ind:
< div class=”text” > Kun med HTML & CSS < /div >
 

Opgave 4a – Del 2

Nu skal vi lave CSS’en for klassen body, .bg1 og @keyframes.

body {
  background-color: black;
}
.text {
  margin-top: 30px;
  padding: 10px;
  font-size: 20px;
  font-weight: 900;
  color: white;
}

Opgave 4a – Del 3

Så er vi tilbage til HTML’en og lave opsætningen for knappen. Der er her brugt label, input og span.

< label class=”switch” >

  < input type=”checkbox” class=”input1″>

  < span class=”slider round” >< /span >

< /label >

Opgave 4a – Del 4

Nu skal vi tilbage i CSS’en og lave klassen for switch. Switch definerer rammen af knappen, hvor input1 klassen er checkboksen som vi gør usynlig med 0 i opacity.

.switch {
  position: relative;
  display: inline-block;
  margin-left: 5%;
  height: 100px;
  width: 247px;
  border-radius: 60px;
  border: 10px solid grey;
}
.switch .input1 { 
  opacity: 0;
  width: 0;
  height: 0;
}    

Opgave 4a – Del 5

Vi bliver i CSS’en og laver klassen for selve knappens indhold. Slider definerer indholdet/baggrundsfarven, slider:before er en ekstra type klasse der tilføjes ovenpå med selve den magenta farvede knap.

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: lightblue;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider.round {
  border-radius: 60px;
}
.slider:before {
  position: absolute;
  content: “”;
  height: 100px;
  width: 100px;
  background-image: linear-gradient(90deg, black, magenta);
  -webkit-transition: .4s;
  transition: .4s;
}
.slider.round:before {
  border-radius: 50%;
}    

Opgave 4a – Del 6

Det sidste vi mangler i CSS’en er at forklare, hvad der skal ske når checkboksen markeres(trykkes på). Her skal der ske det at når input trykkes på SÅ skal slideren skifte baggrundsfarve og knappen flytte sig.

.input1:checked + .slider {
  background-color: lightgreen;
}
.input1:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
.input1:checked + .slider:before {
  -webkit-transform: translateX(147px);
  -ms-transform: translateX(147px);
  transform: translateX(147px);
}    

   
     

Her under ses koden eksekveret.

   
 
Kun med HTML og CSS

Opgave 4b – Del 1

Først skal vi op i HTML’en og trykke enter for at skabe mellemrum mellem vores knapper for at skabe bedre overblik 🙂

Start i HTML’en med at skrive dette ind:

< div class=”text” > Med HTML, CSS og JavaScript < /div >

Vi kan genbruge vores klasse “text” fra 1. knap.

Opgave 4b – Del 2

Vi bliver i HTML’en og skriver nu dette ind under vores linje med overskriften:

< div class=”ramme1″ id=”ramme1″ >

  < div class=”knap1″ id=”knap1″ onclick=”shift()” >< /div >

< /div >

Opgave 4b – Del 3

Nu går vi ned i CSS’en og begynder at definere klassen kaldt rammen1 🙂
.ramme1 {
  margin-left: 5%;
  height: 100px;
  width: 250px;
  border-radius: 60px;
  border: 10px solid grey;
  background-color: #20E8FA;
  -webkit-transition: .4s;
  transition: .4s;
}

Opgave 4b – Del 4

Det sidste vi mangler i CSS’en er at definere knap1 klassen der designer formen og farven på den lilla knap 🙂
.knap1 {
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-image: linear-gradient(90deg, black, purple);
  -webkit-transition: .4s;
  transition: .4s;
}

Opgave 4b – Del 5

Så blev det tid til at lave koden i JavaScriptet😉
Det vi laver er en function vi kalder for shift(). Denne function bliver kaldt frem i HTML’en ved onclick af knappen. Det der sker når knappen klikkes er:
Hvis knappen har en marginLeft på 150px så:
– skifter baggrunden farve
– Og knappe rykkes tilbage til marginLeft 0px
Ellers:
– rykker knappen 150px frem
– og har en anden baggrundsfarve
   
     

Her under ses koden eksekveret.

   
 
Med HTML, CSS og JavaScript