Prøve i informasjonsteknologi 1

Oppgave 1

HTML CSS (grid og bilder)

Du skal lage et nytt prosjekt med følgende mappestruktur:

Avatar
 |------ Bilder
 |         |-- aa00.png
 |         |-- aa01.png 
 :         :    
 :         |-- aa15.png
 |
 |-- avatar.html           
 |-- avatar.css

Over er alle navn med stor forbokstav mapper, Bilder inneholder aa00.png ... aa15png (16 bilder).

Last ned bildene under inn i mappa Bilder (høyre-klikk og lagre som - de har navn aa00 ... aa15 )

Du skal nå lage en html side avatar.html med standard oppsett.

Set tittel på dokumentet
Link til avatar.css

Legg inn følgende html:

 <div id="main">
        <div id="avatar">
            <div></div>
            ..
            ..
        </div>
</div>

Div#avatar skal inneholde 16 div-er.

Lag avatar.css og lag regler slik at:

#avatar bruker grid (4 kolonner)
alle div-er inne i #avatar har riktig bakgrunnsbilde
(+ for bruk av nth-of-type )
Fellesregel for alle div inne i #avatar

En løsning er vist under

#avatar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#avatar div {
    width: 136px;
    height: 140px;
    background-position-y: 14px;
}

#avatar div:nth-of-type(1) {
    background-image: url("bilder/aa00.png");
}
#avatar div:nth-of-type(2) {
    background-image: url("bilder/aa01.png");
}
#avatar div:nth-of-type(3) {
    background-image: url("bilder/aa02.png");
}
#avatar div:nth-of-type(4) {
    background-image: url("bilder/aa03.png");
}
#avatar div:nth-of-type(5) {
    background-image: url("bilder/aa04.png");
}
#avatar div:nth-of-type(6) {
    background-image: url("bilder/aa05.png");
}
#avatar div:nth-of-type(7) {
    background-image: url("bilder/aa06.png");
}
#avatar div:nth-of-type(8) {
    background-image: url("bilder/aa07.png");
}
#avatar div:nth-of-type(9) {
    background-image: url("bilder/aa08.png");
}
#avatar div:nth-of-type(10) {
    background-image: url("bilder/aa09.png");
}
#avatar div:nth-of-type(11) {
    background-image: url("bilder/aa10.png");
}
#avatar div:nth-of-type(12) {
    background-image: url("bilder/aa11.png");
}
#avatar div:nth-of-type(13) {
    background-image: url("bilder/aa12.png");
}
#avatar div:nth-of-type(14) {
    background-image: url("bilder/aa13.png");
}
#avatar div:nth-of-type(15) {
    background-image: url("bilder/aa14.png");
}
#avatar div:nth-of-type(16) {
    background-image: url("bilder/aa15.png");
}

NB! husk at bildene ligger inne i en mappe - så sjekk at url( ) i css har hele stien.
Resultatet skal være omtrent slik (veldig forminska utgave):

Sida skal ha en overskrift over bildene: Velg Avatar Til WebChat

Levering av oppg. 1

Du skal lime inn html og css i tekstboksen på prøven.
Du skal også publisere løsningen din på github (slik at jeg kan sjekke hvordan sida virker).

Lim inn lenke i tekstboksen på prøven (denne gjelder også for oppg 2 og 3).

Oppgave 2.

Database i firebase

Du skal lage en database som vist i datamodellen under:

Lag en ny database i Firebase med navnet webchat
Gi lese og skrivetilgang til alle
Legg inn testdata Medlemmer : ole,per,lise,knut (fyll ut med detaljer)
Forum: katter, pokemon, dankmemes (legg til flere)
Innlegg: (knut#katter(katten min er fin); lise#katter(det er min og)

Levering av oppg. 2

Eksporter json fil fra databasen din og lim inn i tekstboks på prøven.

Eksporter også Rules (på samme måte) og lim inn i samme tekstboks som over.

Oppgave 3.

Hente data og vise i en nettside.

Lag en ny side i prosjektmappa med navnet innlegg.html.

Følg oppskriften og lag en side som viser alle innlegg som er lagra i webchat.

Levering av oppg. 3.

Lim inn html og js kode i tekstboksen for oppg. 3. Skriv inn
-------- HTML -------

over html og

-------- JS --------

over js scriptet.

Prøve 1