Javascript

OPGAVER TIL HTML & CSS – JS – PIXEL PROGRAM

Opgave 9

Opgave 9 – 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:

Opgave 9 – Del 2

Nu skal vi ned i CSS’en. Her skal bi beskrive body og klassen overSkrift og id’en color.

body {
font-family: verdana;
}
.overSkrift {
font-size: 30px;
font-weight: 900;
}
#color {
margin-top: 10px;
margin-bottom: 10px;
border-radius: 10px;
}

Opgave 9 – Del 3

Nu skal vi designe designe vores knap for skjul og gem gitter. Denne pixelArt boks skal laves i HTML’en, som skal bruges i CSS og JS delen også. Læg mærke til at vi brugerr id’er også.

Opgave 9 – Del 4

Vi skal sørge for at JS delen kan kalde på noget visuelt, det beskriver vi i klassen i CSS’en.

.pixelArt {
margin: auto;
height: 300px;
width: 400px;
display: grid;
grid-template-columns: 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px 10px;
border: 1px solid black;
}

Læg mærke til at antallet af 10 px er antallet af kolonner – grid-template-columns.

Opgave 9 – Del 5

Vi skal sørge for at JS delen kan kalde på noget visuelt, det beskriver vi i klassen i CSS’en.

.felter {
height: 10px;
width: 10px;
margin: 0;
padding: 0;
display: none;
}
.felt-front {
position: auto;
height: 10px;
width: 10px;
/*border: 1px solid black;*/
display: grid;
background-image: ;
}
.grid {
border: 1px solid black;
}

Dette er hvordan felterne ser ud, når JS delen kalder det frem.

Opgave 9 – Del 6

Nu skal vi ned i JS delen og lave vores “kald” på at vise vores kolonne bokse. først:

Opgave 9 – Del 7

Nu skal vi op i HTML delen og lave vores knap til at downloade og cleare vores art:

Opgave 9 – Del 8

Nu går vi ned i CSS’en og skaber klassen for clear og download knapperne.

.clear {
margin: auto;
height: 30px;
width: 400px;
display: grid;
align-items: center;
font-weight: 900;
background-color: purple;
color: white;
border-radius: 10px;
}
.download {
width: 400px;
height: 30px;
display: grid;
margin: 10px auto;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: 1.5em;
}

Opgave 9 – Del 9

Nu skal vi ned i JS delen og lave functioner der forklarer at når en checkbox er checked så skal tilhørende label reagere:

Opgave 9 – Del 10

Vi bliver i JS delen og laver functionen der forklarer at når en checkbox er checked så skal tilhørende label reagere – få en farve:

Opgave 9 – Del 11

Vi bliver i JS delen og laver functionen der forklarer at når checkbox for Grid er checked så skal der vises tern. Disse tern kommer ikke med på download: