Javascript
OPGAVER TIL HTML & CSS – JS – PIL
Opgave 1
Opgave 1 – Del 1
Først skal vi igennem disse trin for at skabe vores pil
- Lav en ny pen i codepen.io
- Lav 1 div boks i din HTML del og giv den klassen “ikon”
- Lav derefter 1 div boks inden i med klassen “pil_1”
- Således her
<div class=”ikon”>
<div class=”pil_1″></div>
</div>
Opgave 1 – Del 2
Tilføj dette i din CSS box for at placere “ikon” til at pege nedad:
body {
background-color: purple;
}
.ikon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80px;
height: 60px;
cursor: pointer;
transform: rotate(90deg);
}
Lige nu er vi ved at gøre klar til at lave pilen så den drejer ned af, derfor roterer vi den 90 grader.
Opgave 1 – Del 3
Nu laver vi pilens streg der peger nedad, fordi vi i div boksen der holder den er roteret.
.pil_1 {
position: absolute;
top: 25px;
width: 90%;
height: 10px;
background-color: #fff;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8);
animation: pil_1 700ms linear infinite;
}
Du kan justere på skyggen og animationens hastighed her. Da vi benytter JS vil der ikke skulle laves en @keyframes.
Opgave 1 – Del 4
Nu skal vi til at lave bugen til pilen. Det er to korte streger, her vil vi benytter ::after og ::before
.pil_1::after, .pil_1::before {
content: ”;
position: absolute;
width: 60%;
height: 10px;
right: -8px;
background-color: #fff;
}
OBS: content er det samme som vores streg derfor skriver vi *.
Opgave 1 – Del 5
Nu skal vi så til at justere på de korte streger så de er roteret skråt på pilen.
.pil_1::after {
top: -12px;
transform: rotate(45deg);
}
.pil_1::before {
top: 12px;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.8);
transform: rotate(-45deg);
}
Bemærk at der kun er skygge på den ene af stregerne.
Opgave 1 – Del 6
Nu er vi færdige med CSS delen og skal nu til at lave JS delen 🙂
const $ikon = document.querySelector(‘.ikon’);
Først skal vi definere vores objekt med navnet “ikon” og dertil kalde på den CSS klasse.
Opgave 1 – Del 7
Nu skal vi til at definere pilen i JS og kalde på dens klasse oppe i CSS’en
const pil_1 = document.querySelector(‘.pil_1’);
Opgave 1 – Del 8
I denne del skal vi kode animationen af pilen i JS 😉
$ikon.onclick = () => {}
Stil dig nu i mellem { HER INDE } og tryk på Enter.
Dette stykke kode fortæller at når vi trykker på “ikon” altså ved onclick, så skal der ske….
Opgave 1 – Del 9
Nu skal vi så lave animationen til pil_1
Dette skal stå mellem { og } som vi gjorde klart i sidste del:
pil_1.animate([
{left: '0'},
{left: '10px'},
{left: '0'}
],{
duration: 700,
iterations: Infinity
}); 