OPGAVER TIL HTML & CSS – JS – RADIO KNAPPER & SLIDER
Opgave 4
Opgave 4 – Del 1
- Lav en ny pen i codepen.io
- Gå op i HTML boksen og skriv dette ind:
OBS! Hvis du har lavet slideren i opgave 3 så kan du kopiere dens HTML ind her i stedet.
Opgave 4 – Del 2
Vi går nu ned i vores CSS og beskriver vores klassen for body og container.
Opgave 4 – Del 3
Vi bliver i CSS’en og laver klassen for box1.
Opgave 4 – Del 4
Vi bliver i CSS’en og starter med at lave klasserne for vores slider.
Opgave 4 – Del 5
Vi bliver i CSS’en og laver klassen for vores slider input.
Opgave 4 – Del 6
Vi bliver i CSS’en og laver klassen for vores slider input og boblen man trækker – så det kan gøres med flere typer browsere.
Opgave 4 – Del 7
Vi bliver i CSS’en og laver klassen for vores slider tal i boblen.
Opgave 4 – Del 8
Vi bliver i CSS’en og laver klassen for vores slider linje med alle farverne.
Opgave 4 – Del 9
Nu går vi tilbage til HTML’en og starter på vores knapper.
Opgave 4 – Del 10
Vi bliver i HTML’en og kopier nu dette som du har skrevet ind(samme som på billedet) og sæt det ind 5 gange så vi har 5 af de samme label bokse og altså 5 knapper.
Sørg for at skifte 1 tallet ud OGSÅ på id’erne! Resten skal ikke ændres heller ikke onclick delen.
Opgave 4 – Del 11
Vi bliver i HTML’en for på næstsidste linje, den før den sidste < /div > skal du skrive denne linje ind(se billedet).
Opgave 4 – Del 12
Nu skal vi tilbage til vores CSS boks og starter med at lave en root som vi skal bruge senere – når knapperne trykkes på.
Opgave 4 – Del 13
Vi bliver i CSS boksen og starter med at beskrive boksen omkring knapperne.
Opgave 4 – Del 14
Vi bliver i CSS boksen for nu skal vi beskrive knappernes udseende.
Opgave 4 – Del 15
Nu skal vi beskrive hvordan knapperne ser ud når musen holdes over dem(hover over dem).
Opgave 4 – Del 16
Vi bliver i CSS boksen og beskriver nu knap tekst og input radio knappen.
Opgave 4 – Del 17
Vi bliver i CSS boksen og arbejder nu med klassen selection effekten mellem knapskift og når en knap er trykket ned.
Opgave 4 – Del 18
Vi bliver i CSS boksen for allersidste gang, og tager nu fat på hvad der sker når man trykker på en knap så selection klassen kommer i spil.
Opgave 4 – Del 19
Nu er vi nået til JS delen og skriver nu konstanter, variable og function ind for slideren.
Opgave 4 – Del 20
Før vi kan lave næste del i JS delen, den for knapperne, så skal vi lige tilbage til CSS’en og beskrive klassen active1 som vi kalder på i JS delen om lidt.
Opgave 4 – Del 21
Så nåede vi til vejs ende! Vi går nu tilbage til JS delen og laver det allersidste, nemlig functionen shift1 som knapperne i HTML’en henviser til.
