OPGAVER TIL HTML & CSS – JS – OPGAVE 5
Opgave 5
Opgave 5 – Del 1
- Lav en ny pen i codepen.io
- Først skal vi have lavet baggrunden
- Start i HTML’en med at skrive dette ind:
Opgave 5 – Del 2
Nu skal vi lave CSS’en for klassen body, .bg1 og @keyframes.
body {
overflow: hidden;
margin-top: 0;
margin-left: 0;
}
.bg1 {
position: absolute;
padding: 10%;
height: 550px;
width: 100%;
background-color: #0EED4A;
opacity: 0.8;
}
@keyframes change1 {
0% {filter: hue-rotate(0deg);}
100% {filter: hue-rotate(360deg)}
}
Opgave 5 – Del 3
Så er vi tilbage til HTML’en og lave opsætningen for knapperne. Der er nemlig to oven på hinanden, den øverste er blot skjult indtil vi kalder den frem.
< div class=”master1″ >
< div id=”cirkel1″ class=”cirkel1″ >< /div >
< div id=”knap1″ class=”cirkel2″ >
< div class=”button1″ >CLICK< br >TO START< /div >
< /div >
< div id=”knap2″ class=”cirkel2″ >
< div class=”button1″ >CLICK< br >TO STOP< /div >
< /div >
< /div >
Opgave 5 – Del 4
Nu skal vi tilbage i CSS’en og lave klassen for master og cirkel1. Masteren placerer knapperne, cirkel1 er den vi ser som kanten der skal dreje rundt.
.master1 {
margin-left: 25%;
padding: 100px;
}
.cirkel1 {
position: absolute;
height: 350px;
width: 350px;
border-radius: 50%;
background: conic-gradient(#000 35%,hsl(0 100% 70%) 70%,#000);
}
@keyframes drej {
to {
rotate: 1turn;
filter: hue-rotate(1turn);
}
}
Opgave 5 – Del 5
I denne del skal definere klassen i CSS’en for de 2 knapper der ligger oven på hinanden inde i cirkel1.
.cirkel2 {
position: absolute;
transform: scale(90%, 90%);
height: 350px;
width: 350px;
border-radius: 50%;
background: #03e9f4;
box-shadow: 20px 20px 80px black inset;
cursor: pointer;
display: grid;
}
Opgave 5 – Del 6
Nu skal vi gemme den ene knap, til vi kalder på den i JS delen🙂
Opgave 5 – Del 7
Det sidste vi mangler i CSS’en er at definere button1 klassen der designer teksten på knappen.
Opgave 5 – Del 8
Så blev det tid til at lave koden i JavaScriptet😉
Det vi laver er en eventListener, der lytter til hvornår vores knap1 klikkes på. Når/hvis den så klikkes(linje 3), så sker der disse ting:
– knap2 bliver synlig
– bg1(baggrunden) får tilsat animationen change1
– cirkel1 får tilsat animationen drej
Vi slutter med at skrive at knappen skal lytte til når den klikkes, og derefter køre funktionen start.
Opgave 5 – Del 9
Nu skal vi kode en stop funktion. Vi kopiere nu al vores JS kode og sætter den ind igen på linje 11. Vi ændrer vores variabel til button2 og kalder på knap2. Bagefter gør vi animationerne inaktive med ordet “none” og gemmer til sidst knap2 efter den er blevet klikket på.
Vi slutter med at skrive at knappen skal lytte til når den klikkes, og derefter køre funktionen stop.
