Javascript

 OPGAVER TIL HTML & CSS – JS – DRAW WITH JS 1

Opgave 1

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

Vi arbejder med JS, input bokse og slider i denne opgave. Hvis ikke du kender til dette endnu, så lav nogle af JS begynder opgaverne med sliders og input bokse først.


Opgave 1 – Del 2

Nu skal vi ned i CSS’en. Her skal vi beskrive canvas1 som er området/boksen hvor vi viser det #c som er rammen omkring og klassen inputs er felterne man kan taste numre ind i og tilsidst slider længden. Du kan undlade at lave knappen .btnDraw her, vi bruger den ikke.


Opgave 1 – Del 3

Nu skal vi angive vores variabler (var og let). Tag en linje af gangen og læs før du skriver for at forstå hvad du kalder på med dine variabler.
Fx. starrter vi med at finde midten af boksen c(#c). Her fra starter vi tegningen.

Slideren kaldes på via dens id og skriver tallet ud på siden som den flyttes.
Vi har også vores farve vælger her som også kaldes på via id og streg tykkelsen.


Opgave 1 – Del 4

Vi skal sørge for at vi i JS delen for skiftet billeddet/det visuelle/tegningen når slideren flytter sig, det gør vi med “oninput” funktionen.


Opgave 1 – Del 5

Vi skal også sørge for at vi i JS delen får slettet canvas inden nyt billede/tegning opstår, så det laver vi en function til.


Opgave 1 – Del 6

Nu skal vi så beskrive at slideren skal lytte til når den flyttes og her kalde på clear canvas functionen bemærke input felterne a og b, stå i midten og her skal der så laves en spiral ud med den form som angives med hhv a og b.

Og farven og tykkelsen af stregen vælges af brugeren.
Tegn = stroke();

   
     

Her under er koden eksekveret uden JS linket.