Javascript
OPGAVER TIL HTML & CSS – JS – LAMPE
Opgave 2
Opgave 2 – 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 “floor1”
- Lav derefter 1 div boks neden under med klassen “shadow”
- Således her
<div class=”floor1″></div>
<div id=”shadow” class=”shadow”></div>
Opgave 2 – Del 2
Tilføj nu en baggrund i din CSS box:
body {
width: 100%;
height: 650px;
overflow: hidden;
background-image: linear-gradient(black, #091070, #091070);
}
Opgave 1 – Del 3
Tilføj nu i din CSS klasserne for “floor1” og “shadow”:
Opgave 2 – Del 4
Nu skal tilbage til HTML’en og sætte vores div bokse op til selve Lampen
<div class=”lamp”>
<div class=”stand1″></div>
<div class=”foot1″></div>
<div class=”bulb”></div>
<div id=”bulb1″ class=”bulb1″></div>
<div id=”line1″ class=”line1″>
<div class=”contact1″></div>
</div>
<div id=”light1″ class=”light1″></div>
<div class=”top1″></div>
</div>
OBS: Husk at holde indryk orden.
Opgave 2 – Del 5
Nu skal vi så til at lave klasserne for Lampen
Her definerer vi hvor lampen skal stå og så laver vi pinden til lampen
Opgave 2 – Del 6
Nu skal vi lave klassen for at placere foden og formen af den 🙂
Border radius gør at den buer og skyggen sættes indvendigt. Sætter klasserne ind efter hinanden.
Opgave 2 – Del 7
Nu skal vi til at lave pæren(bulb og bulb1) det er to bokse oven på hinanden for at skifte mellem når pæren er tændt og slukket. Derfor er bulb1 opacity på 0.
Sætter klasserne herunder ind i rækkefølgen.
Opgave 2 – Del 8
Nu skal vi lave snoren(line1). Vi skjuler animationen, da den skal køre i JS og ikke hele tiden med CSS’en. Man kan teste den ved at fjerne /* */ fra koden.
Opgave 2 – Del 9
Nu skal vi lave kuglen der hænger på snoren(contact1).
Opgave 2 – Del 10
Nu skal vi lave lyset der kommer på når man trykker på ON og går væk når man trykker på OFF.
Opgave 2 – Del 11
Nu skal vi til at lave toppen(top1) af lampen. Igen benytter vi os af ::after, hvor content er det samme der tages udgangspunkt i og derfor er tom. Man kunne også have skrevet inherit derinde, som betyder at den eger det samme som top1.
Sætter klasserne herunder ind i rækkefølgen.
Opgave 2 – Del 12
Nu skal lige en tud tilbage i HTML koden og skriver knapperne ind.
Opgave 2 – Del 13
Nu skal vi tilbage til CSS’en og lave knapperne. Det sidste der skal til her er blot knapperne OFF og ON
Sætter klasserne herunder ind i rækkefølgen.
Opgave 2 – Del 14
Nu er vi nået til JS delen!
Sætter klasserne herunder ind i rækkefølgen.
