Javascript

OPGAVER TIL HTML & CSS – JS – APPLY ELEMENTS

Opgave 1

Opgave 1 – Del 1

Først skal vi igennem disse trin

Lav en ny pen i codepen.io
Gå op i HTML boksen og skriv dette ind:

< div class=”hoverTrace” id=”hoverTrace” >< /div >

Opgave 1 – Del 2

Vi går nu ned i vores CSS og beskriver vores klasse for body og hoverTrace

body {
margin: 0;
overflow: hidden;
}
.hoverTrace {
width: 1000px;
margin: auto;
}

Opgave 1 – Del 3

Nu skal vi kigge på CSS koden.

.box1

.box1 {
width: 110px;
height: 55px;
margin-top: -40px;
float: left;
}

.box2

.box2 {
height: 110px;
margin-top: -35px;
margin-left: -55px;
padding-right: 55px;
float: left;
}

.boxFit1

.boxFit1 {
height: 110px;
width: 110px;
transition: 10s;
}

.boxFit1-top

.boxFit1-top {
position: absolute;
height: 80px;
width: 80px;
background-color: #3585F4;
transform: rotate(65deg) rotateX(40deg) rotateY(-55deg);
}

.boxFit1-bottomLeft

.boxFit1-bottomLeft {
position: absolute;
height: 80px;
width: 70px;
margin-left:-23px;
margin-top: 44px;
background-color: darkblue;
transform: rotate(0deg) rotateX(39deg) rotateY(33deg);
}

.boxFit1-bottomRight

.boxFit1-bottomRight {
position: absolute;
height: 80px;
width: 70px;
margin-left:33px;
margin-top: 43px;
background-color: blue;
transform: rotate(0deg) rotateX(-40deg) rotateY(35deg);
}

Opgave 1 – Del 4

Nu er vi nået til JS delen, for vi bruger nemlig JS til at sætte div boksene ind med de klasser vi lige har beskrevet udseendende på, i stedet for at selv at skrive dem ind selv i HTML boksen alle sammen.

Vi starter med at definere vores hoved variabel = hoverTrace

Så laver vi vores function displayFelter() Herinde laver vi et loop. Vi skriver at hvor x = 0 plus da dette til vi når 4.

Stil dig på den tomme linje 5 og følg nu næste del af opgaven…

Opgave 1 – Del 5

Vi bliver i JS boksen, og tager nu fat på næste loop... Husk at trykke enter efter } på linje 9, og vær klar til næste del opgave

Opgave 1 – Del 6

Vi bliver stadig i JS delen. Vi står nu på en tom linje 10. Srkiv nu næste loop ind for næste række forskudte bokse

Opgave 1 – Del 7

Vi kan ikke se noget for vi mangler at kalde vores function ud åbent, det gør vi på allersidste linje efter functionens sidste linje