Prøver og oppgaver

Her finner du en del øvingsoppgaver.

Sjakkbrett

Lag en ny nettside med innhold som vist under

<div id="brett">
  <div></div>
  ...
  ( 64 stykker)
  ...
</div>

I VSCode kan du lage 64 diver ved å skrive div*64 og trykke enter (emmet abr.).

Lag en css som vist under:

#brett {
    width: calc( 50px * 8);
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    border: solid black 1px;
}

#brett div {
    width: 50px;
    height: 50px;
}

#brett div:nth-child(odd) {
    background: gray;
}

Nå har du starten på et sjakkbrett. Kan du lage css-regler slik at du får et fullstendig brett ?
( en løsning krever 2 regler for hver av de 7 neste radene, bruker nth-child(2n+A) hvor A er et tall slik at det gjelder for første rute i den raden regelen lages for. Metoden virker fordi siste css regel overstyrer de som kommer før).

Alternativt kan du legge inn class="gray" på alle ruter som skal være grå.

Slideshow

Bruk metoden med steps(xx) til å vise en bildeserie.

Legg bildene inne i en struktur som vist under:

<div id="box">
  <div id="frame">
    <div><img src="b1.jpg"></div>
    ..
    ..
  </div>
</div>

Lag en css som bruker steps til å flytte frame inne i box.
Skriv regler slik at #frame har posistion:absolute, #box har relative.
#frame bruker grid ( slik at alle bildene kommer på linje ).
#box bruker overflow:hidden (slik at vi bare ser ett av bildene fra frame)

Du kan velge bilder av forskjellig størrelse, bruk da calc( 200px * 8 ) som bredde på #frame
(her er 200px bredde på største bilde, 8 bilder i serien)

Analog Klokke

Lag ny nettside (ny mappe) og lag filene klokke.html klokke.css og klokke.js.
Innholdet i klokke.html lager du som vanlig med ! (VSCode + emmet).
Gi dokumentet tittel Klokke, lag link til css (skriv link og velg link:css) og link til js (skriv script og velg script:src).

Legg inn dette innholdet i klokke.html

 <div id="klokke">
      <div id="center"></div>
      <div id="minutter"></div>
      <div id="timer"></div>
      <div id="sekunder"></div>
  </div>
  <script>
    setup();  // js for å lage time-merker
  </script>

(Noen av dere har kanskje sett en løsning som bruker canvas - men den sparer vi til it2)

Lag følgende css regler

#klokke {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: solid black 3px;
}

#center {
    position: absolute;
    left: 100px;
    top: 100px;
    border-radius: 50%;
    width: 2px;
    height: 2px;
    background-color: red;

}

#sekunder {
    position: absolute;
    left: 100px;
    top: calc((200px - 5px) / 2);
    width: 98px;
    height: 5px;
    background-color: gray;
    animation: turn 60s steps(60) infinite;
    transform-origin: 1px 3px;  /* rotasjonspunktet */
    transform: rotate(0deg); 
}

@keyframes turn {
    100% { transform: rotate(360deg)}
}

Nå har du en klokke med en sekundviser - legg til regler slik at du får minutter og timer.

Her har jeg lagt til markører på timene:

Jeg brukte følgende js code for å tegne de blå firkantene:

function setup() {
  let divKlokke = document.getElementById("klokke");
  let tall = Array(12).fill(1);
  let rot = 0;
  for (let t of tall) {
    let div = document.createElement("div");
    div.className = "tall";
    div.style.transform = `rotate(${rot}deg)`;
    rot += 30;
    divKlokke.appendChild(div);
  }
}

Det du trenger i tillegg til koden (lagres i klokke.js) er en css regel for .tall
Du kan bruke nesten samme regel som for sekunder, men div-en skal ikke ha bakgrunn - bare border-right.
Den skal heller ikke ha noen animasjon. Du må justere transform-origin dersom du har en annen height enn sekunder.

Bildegalleri

(Inspirert av sindre)

Vi skal lage et galleri som viser bilder - bruker kan bla ved å klikke på en rad med radioknapper nederst (vist som sirkler).

Alle effekter er styrt av css - ingen javascript. Det er også mulig å legge til knappper som blar til neste forrige med bare css, men den blir litt innvikla - så jeg dropper den biten.

Jeg bruker emmet for å lage html

.bilde#b$*5  // lager 5 stykk: <div class="bilde" id="b1"></div>
input:radio[name="r"]#r$*5  // lager 5 stykk <input type="radio" name="r" id="r1>
// jeg legger til at den første radio-knappen er valgt

<input type="radio" name="r" id="r1" checked>
<input type="radio" name="r" id="r2">
<input type="radio" name="r" id="r3">
<input type="radio" name="r" id="r4">
<input type="radio" name="r" id="r5">

<div class="bilde" id="b1"></div>
<div class="bilde" id="b2"></div>
<div class="bilde" id="b3"></div>
<div class="bilde" id="b4"></div>
<div class="bilde" id="b5"></div>

Neste trinn er å lage css-regler.
Planen er å legge alle bildene inn som background på de 5 div.bilde - ene. Position abs slik at de ligger på samme plass.
Alle er i utgangspunkt satt med opacity:0 slik at de ikke syns.

Jeg lager så regler for hver radio-knapp som gjelder når den er valgt:

#r1:checked ~ #b1 { opacity:1; }   // når knapp r1 er checked - regel gjelder #b1
... // en slik for hver knapp #r2..#r5

Dermed blir bildet i b1 synlig dersom knapp r1 blir valgt.

Plassering av radioknappene styres med denne regelen:

#galleri input {
    position: relative;
    z-index: 9;
    margin-top: 80vh;
}

#r1 {
    margin-left: calc((90vw - 100px) / 2);
}

Den siste regelen (margin-left) plasserer radioknappene omtrent midt på, margin-top gjør at knappene ligger nederst på skjermen. z-index:9 og position:relative sørger for at knappene ligger over bildene (uten disse to ligger de under).

Reglene under setter størrelse på bildene og legger inn en liten transition for skifte av bilde.

#galleri {
    position: relative;
    width: 90vw;
    height: 90vh;
    border: solid green 1px;
}

.bilde {
    position: absolute;
    width: calc(90vw - 50px);
    height: calc(90vh - 50px);
    left: 25px;
    top: 25px;
    background-position: center;
    background-size: cover;
    opacity: 0;
    z-index: 1;
    transition: 1s;
}