💱 Valutakonverter

Kort overblik

• Tjek en rigtig valutaside og kør en færdig App Lab-app.
• Lav kopi og undersøg hvad den består af.
• Tilføj knap til EUR → DKK og få begge retninger til at virke.
• Gør kursen redigerbar med et ekstra inputfelt.

Opgave 1 - afprøv eksisterende applikation:

1. Besøg valutakurser.dk. Hvad kan siden bruges til?
2. Hvor meget er 100 DKK i euro EUR?
3. Hvor meget er 100 USD i Danske kroner? DKK

Opgave 2 - Opret konto og kopier en app

1. Opret elevkonto på code.org (Jeg er elev eller I'm a Student i Engelsk udgave).
2. Åbn appen i App Lab: Valutakonverter (projektlink).
3. Lav en kopi af app'en til din egen konto: Klik Kode (øverst til venstre) → Bland igen (midt for, for oven, blå). Nu ligger en kopi af app'en på din konto.

Opgave 3 – Undersøg app’en - Prøv at køre kopien

1. Prøv at køre din kopi af app’en
2. Hvad kan den? Hvad kan den ikke endnu?

Opgave 4 – Undersøg app’en - objekter har navne (aka ID)

1. Gå til Design. Find navnene (ID) på:
   • Label med teksten DKK.
   • Inputfeltet under DKK.
   • Knap DKK → EURO.
2. Navnene skal være unikke, dvs. to objekter må ikke hedde det samme.
3. Hvad mon navnene kan bruges til?

Opgave 5 – Hændelser (events)

Mål: Forstå hvordan den eksisterende knap virker, uden at ændre noget i koden.

1. Skift til Kode og vælg Vis tekst i højre side.
2. Find den funktion, der starter med onEvent("button1", "click", ...):

onEvent("button1", "click", function (event) {
          var kroner = getText("text_krone");
          var euro   = kroner / 8;     // midlertidig fast kurs
          setText("text_euro", euro);
        });

3. Kig på linje for linje og skriv med egne ord, hvad der sker:
• onEvent("button1", "click", ... ) – hvornår kører denne kode?
• var kroner = getText("text_krone"); – hvad hentes her?
• var euro = kroner / 8; – hvad beregnes her?
• setText("text_euro", euro); – hvad skrives tilbage på skærmen?
4. Skriv 1–2 linjers kommentarer i koden, der forklarer med egne ord hvad der sker, når man klikker på knappen.

Opgave 6 – Undersøg app’en - Hvad har du lært indtil nu?

1. Klik på Hint-kasserne herunder.
   • Hvad er en variabel - forklaret med egne ord?
   • Hvad er en funktion, f.eks. som SetText() - forklaret med egne ord?
   • Hvad er et Event (hændelse)? - forklaret med egne ord?

Opgave 7 – Hændelser (events): Tilføj ny knap og giv den kode

1. I Design, tilføj en ny knap. Lad den foreløbigt hedde button2 og giv den teksten EURO → DKK.
2. Klik på knappen og vælg Tilføj event‑handler.
3. Undersøg koden:

   onEvent("button2", "click", function (event) {
           // kode som kører ved klik
         });

   Svar: Hvad er id, og hvad betyder "click"?
4. Test at eventet kører ved klik:

   console.log("Klik på EURO → DKK-knappen");

5. Læs beløbet fra DKK‑feltet og skriv resultat i EURO‑feltet (dummy for at teste flowet):

   onEvent("button2", "click", function (event) {
                 var euro = getText("text_euro");       // læs euro som tekst
                 setText("text_krone", euro);           // skriv det direkte i DKK-feltet (dummy)
               });

   Prøv med 0, 1, 12.5 – giver det mening?

Opgave 8 – Undersøg app’en - tilføj kommentarer

1. Skift visning i højre side: Vis blokke ↔ Vis tekst.
2. Kig kort i tekst-koden. Diskuter med "nabo" om hvad i tror koden gør.
3. Tilføj kommentarer i koden med // Comment (Værktøjskasse → Functions). Tilføj kommentar ud for hver linje kode om hvad du tror koden gør.

Opgave 9 – Giv knapperne bedre navne (ID’er)

1. Gå til Design og omdøb:
   • button1 → btnDKK2EUR
   • button2 → btnEUR2DKK
2. Gå til Kode og erstat alle steder hvor der står "button1" og "button2" med de nye ID’er.
3. Hvorfor er gode navne vigtige? Svar kort.

Opgave 10 – Tilføj beregning fra EUR til DKK

Mål: Erstat din dummy i Opgave 7 med rigtig beregning.

1. Sørg for at knappen hedder btnEUR2DKK og har teksten EURO → DKK.
2. Byt dummy‑koden ud med beregning (midlertidig kurs 8):

   onEvent("btnEUR2DKK", "click", function(){
           var euro   = getNumber("text_euro");
           var kroner = euro * 8; // midlertidig fast kurs
           setText("text_krone", kroner.toFixed(2));
         });

Opgave 11 – Gør kursen redigerbar

Mål: Brugeren kan selv skrive den aktuelle kurs i et nyt inputfelt.

1. Design: Tilføj et inputfelt til kurs og giv det ID, fx text_kurs.
2. I koden: Læs kursen og brug den i stedet for tallet 8.

Eksempel

// DKK → EUR
onEvent("btnDKK2EUR", "click", function(){
  var kurs   = Number(getText("text_kurs"));
  var kroner = Number(getText("text_krone"));
  if (!kurs) { setText("text_euro", ""); return; } // simpelt værn
  var euro = kroner / kurs;
  setText("text_euro", euro.toFixed(2));
});

// EUR → DKK
onEvent("btnEUR2DKK", "click", function(){
  var kurs   = Number(getText("text_kurs"));
  var euro   = Number(getText("text_euro"));
  if (!kurs) { setText("text_krone", ""); return; }
  var kroner = euro * kurs;
  setText("text_krone", kroner.toFixed(2));
});

Refleksion (hurtig exit‑ticket)

• Hvor i koden læser du input?
• Hvor laver du beregningen?
• Hvor viser du resultatet?
• Hvad var forskellen på event, variabel og setText()?

↩ Til forsiden