Javascript

 OPGAVER TIL HTML & CSS – JS – JULEKUGLE

Opgave 3

Opgave 3 – Del 1

Først skal vi igennem disse trin for at skabe vores Julekugle
  • Lav en ny pen i codepen.io
  • Lav 1 div boks i din HTML del og giv den klassen “positionXmas”
  • Lav derefter disse div bokse inden i med tilsvarende klasser 
  • Således her

    <div class=”positionXmas”>
        <div class=”lamp_1″>
               <div class=”light_1″></div>
               <div class=”poll_1″></div>
         <div class=”bulb_1″>
               <div class=”color_1″></div>
         </div>
         <div class=”shine_1″></div>
         <div class=”shadow_1″></div>
      </div>
    </div>

Opgave 3 – Del 2

Tilføj dette i din CSS box:
body {
  overflow: hidden;
}
@keyframes day_1 {
  0% {background-color: white;}
  40% {background-color: #1B0024;}
  80% {background-color: #1B0024;}
  100% {background-color: white;}
}
 
Lige nu er vi ved at gøre klar til at baggrunden kan køre med en keyframe, ved tryk på en knap, når JS bliver programmeret.

Opgave 3 – Del 3

Nu sætter vi CSS til at være centreret for vores design og designer snoren/stangen til Julekuglen.

.positionXmas {
  margin-left: 50%;
  margin-top: 0px;
}
.poll_1 {
  position: absolute;
  margin-left: 20px;
  height: 200px;
  width: 10px;
  border-radius: 50px;
  background-image: linear-gradient(to right, white, grey, black);
  box-shadow: -5px 0 15px grey;
}    

Ved at benytte box-shadow så kommer der kun en skygge fra objektet og ikke div boksen som er firkantet. 

Opgave 3 – Del 4

Nu skal vi til at lave lyset i kuglen:

.light_1 {
  position: absolute;
  margin-top: 150px;
  margin-left: -140px;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-image: radial-gradient(magenta, violet, #510180);
  filter: blur(30px);
  /*animation: grow_2 10s infinite linear;*/
  opacity: 0;
}

OBS: Vi gemmer animationen linket fordi den ikke skal køre på nær i JS, men man kan aktivere den til at se om det virker
Skriv denne kode ind neden under.

Opgave 3 – Del 5

Nu skal vi så til at designe vores glaskugle
Læg mærke til at både arbejdes med en box-shadow indeni og uden på 
Dette kan gøres ved at lave komme mellem handlingerne.

Opgave 3 – Del 6

Så lang så godt. Nu skal vi til at lave CSS koden for farven der skinner frem

.color_1 {
  position: absolute;
  margin-top: 200px;
  margin-left: 0px;
  height: 260px;
  width: 260px;
  border-radius: 50%;
  background-image: radial-gradient(#510180, magenta);
  /*animation: grow_1 10s infinite linear;*/
  opacity: 0;
}

OBS: Vi gemmer animationen linket fordi den ikke skal køre på nær i JS, men man kan aktivere den til at se om det virker

Opgave 3 – Del 7

I denne del skal vi lave klassen for strålen/shine

.shine_1 {
  position: absolute;
  margin-top: 305px;
  margin-left: -25px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  filter: blur(20px);
  background-color: white;
  opacity: 0.7;
}

Opgave 3 – Del 8

I denne del skal vi lave klassen for skyggen den har en del forskellige farver 😉

.shadow_1 {
  position: absolute;
  margin-top: 190px;
  margin-left: -105px;
  height: 255px;
  width: 255px;
  border-radius: 50%;
  box-shadow: 
    20px -20px 30px #320042 inset,
    10px -10px 20px black inset,
    -10px 10px 20px white inset;
}

Opgave 3 – Del 9

Nu skal vi have kigget på at linke til JavaScript filen der styrer scriptet så det virker
Gå ind på tandhjulet på JS boksen og skriv linket her ind
https:// ajax. googleapis. com/ajax/libs/jquery/3.5.1/jquery.min. js

OBS! der er mellemrum i linket, så husk at fjerne mellemrum

Opgave 3 – Del 10

Nu skal vi have kigget på knapperne og skal derfor tilbage til HTML’en
Tilføj til sidst i HTML koden dette:

Opgave 3 – Del 11

Vi er næsten ved at være der, nu mangler lige at lave CSS til de 3 knapper 🥳

.button_On {
  position: absolute;
  margin-left: 80%;
  margin-top: 30px;
  width: 150px;
  height: 50px;
  border-radius: 50px;
  background-color: purple;
  color: white;
  font-size: 18px;
  box-shadow: -5px -10px 20px 7px black inset;
  cursor: pointer;
}

.button_Off {
  position: absolute;
  margin-left: 80%;
  margin-top: 100px;
  width: 150px;
  height: 50px;
  border-radius: 50px;
  background-color: purple;
  color: white;
  font-size: 18px;
  box-shadow: -5px -10px 20px 7px black inset;
  cursor: pointer;
}

.pause_1 {
  position: absolute;
  margin-left: 80%;
  margin-top: 170px;
  width: 150px;
  height: 50px;
  border-radius: 50px;
  background-color: purple;
  color: white;
  font-size: 18px;
  box-shadow: -5px -10px 20px 7px black inset;
  cursor: pointer;
}

Opgave 3 – Del 12

Vi er endelig nået til det aller sidste nemlig delen med JavaScript!🥳
Lad os tage første del her:

Opgave 3 – Del 13

Her kommer den anden og sidste del af JavaScript’en 🥳
   
     

Her under er koden eksekveret uden JS linket.

   
 

Ekstra opgave

1. Design med dine egne farver 
Hint: Du skal kigge på baggrundene
2. Put flere snefnug på Julekuglen
Hint: style i linket med snefuget for at justere på størrelserne
3. Juster på den lilla glød
Hint: du skal kigge på opacity i grow_2