Javascript

 OPGAVER TIL HTML & CSS – JS – LAMPE

Opgave 9

Opgave 9 – 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 9 – 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 9 – Del 3

Tilføj nu i din CSS klasserne for “floor1” og “shadow”:

Opgave 9 – 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 9 – 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 9 – 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 9 – 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 9 – 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 9 – Del 9

Nu skal vi lave kuglen der hænger på snoren(contact1).

Opgave 9 – 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 9 – 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 9 – Del 12

Nu skal lige en tud tilbage i HTML koden og skriver knapperne ind.

Ekstra opgave 3:
Gør dette kortere ved at samle alle functionerne til 1 function pr knap.

For buttonOff, skriv:
onclick=”buttonOff()”

For buttonOn, skriv:
onclick=”buttonOn()”

Opgave 9 – 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 9 – Del 14

Nu er vi nået til JS delen!
Sætter klasserne herunder ind i rækkefølgen.
 

Ekstra opgave 3:
Lav nu to functioner

Kald den ene: buttonOff()
Kald den anden: buttonOn()

Tag nu og skriv det ind i functionerne, som skal ske når man tænder på knappen og slukker på knappen. 
Du skal bare samle indholdet fra de andre functioner til de 2 functioner du lige har lavet.

Ekstra opgave 2:
For at få snoren til at strække sig skal du i stedet for animation bruge height og justere på længden af den ved tændt(on) og tilbage ved sluk(off).

   
     

Her under ses koden eksekveret.

   
 

Ekstra opgave

1. Prøv at skifte farverne til dem du kan lide 
Hint: Du skal kigge efter baggrundsfarverne
2. Prøv at få snoren til at trække hver gang du trykker på en knap
Hint: Du kan justere på længden af snoren i JavaScript’en, i stedet for at animere
3. Prøv at lave JS koden kortere
Hint: Du kan nøjes med 2 funktioner. Husk at du skal både tilrette function i html’en og i JavaScript’en