OPGAVER TIL HTML & CSS – JS – UR
Opgave 6
Opgave 6 – Del 1
- Lav en ny pen i codepen.io
- Går nu op i din HTML og skriv disse div bokse ind
- Således her
< div class=”body1″ >
< div class=”clock-container” >
< div class=”current-day” > < /div >
< div class=”current-seconds” > < /div >
< div class=”current-seconds” >< /div >
< div class=”clock-number num1″ >
< div >1< /div >
< /div>
< div class=”clock-number num2″ >
< div >2< /div >
< /div >
< div class=”clock-number num3″ >
< div >3< /div >
< /div >
< div class=”clock-number num4″ >
< div >4< /div >
< /div>
< div class=”clock-number num5″ >
< div >5< /div >
< /div >
< div class=”clock-number num6″ >
< div >6< /div >
< /div >
< div class=”clock-number num7″ >
< div >7< /div >
< /div >
< div class=”clock-number num8″ >
< div >8< /div >
< /div >
< div class=”clock-number num9″ >
< div >9< /div >
< /div >
< div class=”clock-number num10″ >
< div >10< /div >
< /div >
< div class=”clock-number num11″ >
< div >11< /div >
< /div >
< div class=”clock-number num12″ >
< div >12< /div >
< /div >
< div class=”clock-hand” id=”sec” >
< div class=”second-hand” >< /div >
< /div >
< div class=”clock-hand” id=”min” >
< div class=”minute-hand” >< /div >
< /div >
< div class=”clock-hand” id=”hr” >
< div class=”hour-hand” >< /div >
< /div >
< /div >
< /div >
Opgave 6 – Del 2
Nu skal vi ned i CSS’en og definere baggrunden(body1).
.body1 {
animation: clock-animation 6s infinite;
width: 100%;
height: 580px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
overflow: hidden;
font-family: cursive;
}
Opgave 6 – Del 3
Vi skal også lave en animation til bagrunnden, så den skifter farve i infinite.
@keyframes clock-animation {
0% {background: #3e5afb;}
50% {background: #3e5;}
75% {background: yellow;}
100% {background: #3e5afb;}
}
Opgave 6 – Del 4
Vi skal også lave en style til urets baggrund.
.clock-container {
width: 350px;
height: 350px;
border: 6px solid purple;
border-radius: 50%;
position: relative;
background: #fff;
}
Opgave 6 – Del 5
Vi skal også lave en style til urets knop i midten.
.clock-container::after {
content: “”;
position: absolute;
width: 15px;
height: 15px;
background: purple;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
Opgave 6 – Del 6
Nu skal vi til at style tallene/numrene på uret.
.clock-number {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
.clock-number:after {
content: “”;
position: absolute;
height: 13px;
width: 3px;
top: 13%;
background: #000;
}
Opgave 6 – Del 7
Nu skal vi placere alle tallene på uret så de alle stå lige.
.clock-number>div {
padding: 12px;
}
.num1 {
transform: rotate(30deg)
}
.num1>div {
transform: rotate(-30deg)
}
.num2 {
transform: rotate(60deg)
}
.num2>div {
transform: rotate(-60deg)
}
.num3 {
transform: rotate(90deg)
}
.num3>div {
transform: rotate(-90deg)
}
.num4 {
transform: rotate(120deg)
}
.num4>div {
transform: rotate(-120deg)
}
.num5 {
transform: rotate(150deg)
}
.num5>div {
transform: rotate(-150deg)
}
.num6 {
transform: rotate(180deg)
}
.num6>div {
transform: rotate(-180deg)
}
.num7 {
transform: rotate(210deg)
}
.num7>div {
transform: rotate(-210deg)
}
.num8 {
transform: rotate(240deg)
}
.num8>div {
transform: rotate(-240deg)
}
.num9 {
transform: rotate(270deg)
}
.num9>div {
transform: rotate(-270deg)
}
.num10 {
transform: rotate(300deg)
}
.num10>div {
transform: rotate(-300deg)
}
.num11 {
transform: rotate(330deg)
}
.num11>div {
transform: rotate(-330deg)
}
.num12 {
transform: rotate(360deg)
}
.num12>div {
transform: rotate(-360deg)
}
Opgave 6 – Del 8
Nu skal vi placere urets hænder.
.clock-hand {
width: 100%;
height: 100%;
position: absolute;
}
.clock-hand>div {
left: 50%;
bottom: 50%;
transform: translateX(-50%);
position: absolute;
border-radius: 12px;
}
Opgave 6 – Del 9
Så kan vi begynde at style den anden hånd.
.second-hand {
height: 32%;
width: 1px;
background: purple;
}
.second-hand::after {
position: absolute;
content: “”;
border-style: solid;
border-width: 4px;
border-color: transparent transparent purple transparent;
left: 50%;
transform: translateX(-50%);
top: -6%;
}
Opgave 6 – Del 10
Så mangler vi at style minut og time hænderne.
.minute-hand {
height: 30%;
width: 4px;
background: #000;
}
.hour-hand {
height: 20%;
width: 8px;
background: #000;
}
Opgave 6 – Del 11
Så mangler vi at style visningen af dagen og secunderne.
.current-day {
position: absolute;
font-size: 12px;
font-weight: bold;
left: 50%;
transform: translateX(-50%);
top: 25%;
}
.current-seconds {
position: absolute;
font-size: 12px;
font-weight: bold;
left: 50%;
transform: translateX(-50%);
bottom: 25%;
background: purple;
color: #fff;
padding: 4px;
}
Opgave 6 – Del 12
Så er vi færdige med CSS delen og skal nu til at lave JS delen 🙂
let secondHand = document.querySelector(“#sec”);
let minHand = document.querySelector(“#min”);
let hourHand = document.querySelector(“#hr”);
Opgave 6 – Del 13
Vi trykker enter 2 gange i JS delen og tilføjer intervallet der roteres med
Opgave 6 – Del 14
I denne del skal vi kode funktionen til uret i JS delen 😉
