OPGAVER TIL HTML & CSS – JS – HUMØR BAROMETER
Opgave 10 - JS BEGYNDER
Opgave 1 – Del 1
- Lav en ny pen i codepen.io
- Vi starter med at bygge startskærmen i HTML delen.
Således her:
< div class=”baroMeter” >< /div >
Dertil laver vi CSS klassen til:
.baroMeter {
position: absolute;
margin-left: -250px;
transform: scale(2);
}
Opgave 3 – Del 2
< div class=”baroMeter” >
< div class=”cone1″ id=”cone1″ >
< div class=”emojis” id=”emo1″ >
< /div >
< /div >
< div class=”cone2″ id=”cone2″ >
< div class=”emojis” id=”emo2″ >
< /div >
< /div >
< div class=”cone3″ id=”cone3″ >
< div class=”emojis” id=”emo3″ >
< /div >
< /div >
< div class=”cone4″ id=”cone4″ >
< div class=”emojis” id=”emo4″ >
< /div >
< /div >
< div class=”cone5″ id=”cone5″ >
< div class=”emojis” id=”emo5″ >
< /div >
< /div >
< div class=”stick” id=”stick” >
< div class=”speedo” id=”speedo” >< /div >
< /div >
< /div >
.cone1 {
position: absolute;
width: 0;
height: 0;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
border-top: 100px solid #B8FF52;
border-radius: 50%;
margin-left: 250px;
margin-top: 100px;
transform: rotate(-72deg);
display: flex;
justify-content: center;
filter: brightness(1);
}
.cone2 {
position: absolute;
width: 0;
height: 0;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
border-top: 100px solid #68FC70;
border-radius: 50%;
margin-left: 267px;
margin-top: 75px;
transform: rotate(-36deg);
display: flex;
justify-content: center;
}
.cone3 {
position: absolute;
width: 0;
height: 0;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
border-top: 100px solid #6BB5FF;
border-radius: 50%;
margin-left: 295px;
margin-top: 65px;
transform: rotate(0deg);
display: flex;
justify-content: center;
}
.cone4 {
position: absolute;
width: 0;
height: 0;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
border-top: 100px solid #3B3DFF;
border-radius: 50%;
margin-left: 322px;
margin-top: 75px;
transform: rotate(37deg);
display: flex;
justify-content: center;
}
.cone5 {
position: absolute;
width: 0;
height: 0;
border-left: 32px solid transparent;
border-right: 32px solid transparent;
border-top: 100px solid #8027FF;
border-radius: 50%;
margin-left: 340px;
margin-top: 100px;
transform: rotate(72deg);
display: flex;
justify-content: center;
}
.emojis {
margin-top: -100px;
opacity: 0;
transition: 0.2s;
}
.stick {
height: 12px;
width: 90px;
position: absolute;
/*border: 1px solid black;*/
margin-left: 282.5px;
margin-top: 150px;
}
.speedo {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 90px solid white;
filter: drop-shadow(5px 5px 5px);
border-radius: 50px;
margin-top: -35px;
transform: rotate(84deg);
transition: 0.3s;
}
Opgave 3 – Del 3
Nu skal vi have tilføjet vinder siden i HTML’en
Det gør vi ved at tilføje denne den af kode:
< div class=”forms” >
< input type=”range” value=”0″ step=”0.1″ min=”0″ max=”192″ id=”ranges” / >
< /div >
Sæt herefter tilhørende klasser ind i CSS’en.
#ranges {
position: absolute;
-webkit-appearance: none;
width: 20rem;
height: 0.5rem;
background: #90CAF9;
outline: none;
opacity: 0.7;
border-radius: 0.5rem;
-webkit-transition: .2s;
transition: opacity .2s;
margin: 400px 250px;
}
#ranges:hover {
opacity: 1;
}
#ranges::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #2962FF;
border: 0.5rem solid #FFF;
cursor: pointer;
}
#ranges::-moz-range-thumb {
width: 2rem;
height: 2rem;
background: #2962FF;
cursor: pointer;
}
Opgave 3 – Del 4
Nu skal vi kigge på JS delen.
Opgave 3 – Del 5
Vi bliver i JS delen og laver nu vores funktion -> function moves()
Opgave 3 – Del 6
Vi skal nu kalde på funtionen i JS så den afspilles når vi rykker på slideren, det skal vi lytte efter når vi rykker på slideren.
