Javascript

 OPGAVER TIL HTML & CSS – JS – METONOME

Opgave 5

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

OBS! På linje 4 er der gjort plads til sætte mere ind.


Opgave 5 – Del 2

Vi går nu ned i vores CSS og beskriver vores klasser for body og Tekst1


Opgave 5 – Del 3

Nu skal vi tilbage til HTML‘en. For vi skal lige have lidt mere med. Vi skal nemlig klargøre til at designe boksen for metronomen

Hvis ikke du kan finde noder ved at holde Windows tasten og ^ nede samtidig så skriv vt noget i stedet 🙂


Opgave 5 – Del 4

Nu skal vi tilbage til vores CSS boks og skrive klassen ind for skæret bagved metronomen.


Opgave 5 – Del 5

Vi bliver i CSS boksen. og designer nu rammen af boksen.


Opgave 5 – Del 6

Vi fortsætter i CSS boksen. og designer nu boksen toppen og bunden itui1 og itui2.


Opgave 5 – Del 7

Vi bliver stadig i CSS’en og går nu i gang med at beskrive der hvor noderne står


Opgave 5 – Del 8

Nu hopper tilbage til HTML’en. Nu skal vi have skrevet slideren ind som skal virke som vores metronome(linje 10-16).


Opgave 5 – Del 9

Nu arbejder videre med vores CSS. Nu omkring slideren


Opgave 5 – Del 10

Nu fortsætter lidt endnu med CSS’en. Stadig omkring slideren, denne gang så den fungere i flere browsere.


Opgave 5 – Del 11

Vi er stadig i CSS’en og stadig omkring slideren, denne gang beskriver vi den del man rykker på – range-slider_thumb.


Opgave 5 – Del 12

Vi er nærmer os enden af CSS’en. Vi er stadig i gang omkring slideren, denne gang beskriver vi stregen – range-slider_line.


Opgave 5 – Del 13

Vi er nærmer os enden af CSS’en. Vi er stadig i gang omkring slideren, denne gang beskriver vi udfyldningen af stregen – range-slider_line-fill og dens keyfames når man rykker på den – takten.


Opgave 5 – Del 11

Nu er vi nået til JS delen! Den allersidste del i opgaven. Først skal vi lave konstanterne – const

 

Derefter laver vi functionen der laver takten.

 Til sidst siger vi at denne function skal køre når man åbner winduet til opgaven og at det skal ændre sig/følge slider value ved ændringer undervejs.

   
     

Her under er koden eksekveret uden JS linket.