Javascript

 OPGAVER TIL HTML & CSS – JS – TODO LIST

Opgave 8

TODO LISTE

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

På linje 8 skal du skrive denne linje ind


Opgave 8 – Del 2

Vi bliver i HTML boksen og skal nu kopiere det du ser på billedet. Bagefter sætte du kopien ind lige nedenunder. HUSK at ændre på id navnene, så tallene ikke er ens men i rækkefølge. Lav en 5 stykker og dertil ændre id navnene fra 1 til 5.


Opgave 8 – Del 3

Vi går ned i CSS boksen, for nu skal vi beskrive heleListen og skrift1.


Opgave 8 – Del 4

Vi bliver i CSS boksen, og beskriver nu todos som er div’en der holder om checkboksen og skrivefeltet. Vi skal også fortælle hvordan checkboks(check) og skrivefelterne(items) skal se ud.


Opgave 8 – Del 5

Vi bliver i vores CSS boks stadig for nu skal vi sørge for at når man hakker en boks af, så skal tilhørende tekst/item streges ud. Det gør vi sådan her(se billede)

HUSK at du kan kopiere den første og sætte ind for de andre bare ændre id navnene for hver af dem. Det skal passe med det antal input bokse og input felter du lavede i HTML koden.


Opgave 8 – Del 6

Det allersidste vi skal lave i CSS boksen er beskrivelsen af vores clear knap/button.


Opgave 8 – Del 7

Så nåede vi til vores JS del
Den er meget simpel og lige til forklaret på billedet.

Du behøver ikke skrive hele forklaringen ind også(alt det med // foran) det er usynlige kommentarer så man altid kan gå tilbage til opgaven og vide hvad den går ud på.

   
     

Her under er koden eksekveret uden JS linket.

   
 
TODO LISTE