Javascript

 OPGAVER TIL HTML & CSS – JS – SLIDER

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
  • Skriv dette ind i din HTML boks

OBS: Vi skal senere stå på linje 4 trykke enter og skrive slider koden ind.

Opgave 3 – Del 2

Vi går ned i CSS boksen og skriver klassen for body og container

Opgave 3 – Del 3

Vi skal nu til at forme hjertet i CSS boksen. Vi har en hoved klasse og derefter en before og after dele.


Opgave 3 – Del 4

Nu skal vi til at beskrive hearts before og after nede i CSS’en.

Opgave 3 – Del 5

Det sidste vi skal omkring hjertet er at lave boksen oven over der skjuler hjertet og hvis opacity justeres af slideren.

Opgave 3 – Del 6

Vi hopper op i HTML’en igen og skriver nu ind for slideren. Stil dig på den tomme linje 4 og tryk nu enter. Nu hvor du står på linje 5 skriv nu dette ind som står på billedet.


Opgave 3 – Del 7

I denne del skal vi være i CSS’en og skriv alle klasserne ind for slideren.

.box1 {
  display: flex;
 align-items: center;
  justify-content: center;
  height: 100px;
  width: 600px;
  background-color: white;
  border-radius: 50px;
  border: 5px solid grey;
}

.range-slider {
    position: relative;
    width: 500px;
    height: 80px;
}

.range-slider_input {
width: 100%;
position: absolute;
z-index: 3;
transform: translateY(-50%);
-webkit-appearance: none;
appearance: none;
top: -30%;
width: 100%;
height: 4px;
opacity: 0;
margin: 0;
}

.range-slider_input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 100px;
height: 100px;
cursor: pointer;
top: -30%;
border-radius: 50%;
opacity: 0;
}

.range-slider_input::-moz-range-thumb {
width: 14vmin;
height: 14vmin;
cursor: pointer;
top: -30%;
border-radius: 50%;
opacity: 0;
}

.range-slider_thumb {
width: 14vmin;
height: 14vmin;
border: 0.6vmin solid #303030;
border-radius: 50%;
position: absolute;
left: 0;
top: -30%;
transform: translateY(-50%);
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
font-weight: 700;
font-size: 4vmin;
color: #303030;
z-index: 2;
}

.range-slider_line {
height: 25px;
width: 100%;
background-color: #e1e1e1;
top: 50%;
transform: translateY(-50%);
left: 0;
border-radius: 50px;
position: absolute;
z-index: 1;
}

.range-slider_line-fill {
position: absolute;
height: 25px;
border-radius: 50px;
width: 0;
background-image: linear-gradient(90deg, magenta, black);
}


Opgave 3 – Del 8

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

Opgave 3 – Del 9

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

Her under er koden eksekveret.

   
 

Ekstra opgave

1. Design med dine egne farver 
Hint: Du skal kigge på baggrundene