🏋️ Övningsuppgifter

Gissa talet

Om du har kvar koden från 📹 Gissa Talet-övningen, skriv om den på TypeScript-format.

Spara filen som guessTheNumber.ts.

En exempel-lösning ("facit")

const random = Math.ceil(Math.random() * 100);
const feedback: HTMLElement | null = document.querySelector('#feedback');

let alternateBgColor = false;

const input: HTMLInputElement | null = document.querySelector('#guess');
if (input) {
  input?.addEventListener('keydown', checkKeyPress);
}

function checkKeyPress(e: KeyboardEvent) {
  if (!input && !feedback) {
    // Kör inte funktionen om input och feedback är null
    return;
  }

  if (e.code === 'Enter') {
    document.body.style.backgroundColor = alternateBgColor ? 'yellow' : 'white';
    alternateBgColor = !alternateBgColor;
    
    if (input && feedback) {
      const userGuess = Number(input.value); // Gör typkonverteringen bara en gång
  
      if (userGuess === random) {
        feedback.innerHTML = 'Du har gissat rätt!';
      } else if(userGuess > random) {
        feedback.innerHTML = 'Du har gissat för högt!';
      } else {
        feedback.innerHTML = 'Du har gissat för lågt!';
      }
    }
  }
}

Testa sedan att "kompilera" om koden till vanlig JavaScript genom att i terminalen skriva:

npx tsc guessTheNumber.ts

Det borde nu skapas en vanlig JavaScript fil vid sidan om TypeScript-filen, och koden borde se ut i stil med följande:

TS -> JS

"use strict";
exports.__esModule = true;
var random = Math.ceil(Math.random() * 100);
var feedback = document.querySelector('#feedback');
var alternateBgColor = false;
var input = document.querySelector('#guess');
if (input) {
    input === null || input === void 0 ? void 0 : input.addEventListener('keydown', checkKeyPress);
}
function checkKeyPress(e) {
    if (!input && !feedback) {
        // Kör inte funktionen om input och feedback är null
        return;
    }
    if (e.code === 'Enter') {
        document.body.style.backgroundColor = alternateBgColor ? 'yellow' : 'white';
        alternateBgColor = !alternateBgColor;
        if (input && feedback) {
            var userGuess = Number(input.value); // Gör typkonverteringen bara en gång
            if (userGuess === random) {
                feedback.innerHTML = 'Du har gissat rätt!';
            }
            else if (userGuess > random) {
                feedback.innerHTML = 'Du har gissat för högt!';
            }
            else {
                feedback.innerHTML = 'Du har gissat för lågt!';
            }
        }
    }
}

Bildspel

Skriv om koden på ett bildspel.

Kodexempel hittar du här.

PS. Passa på att göra så att bildspelet kan bestå av en array med bilder istället för att de är hårdkodade, som nu.

Munkshoppen

Prova att skriva om en del av funktionerna i inlämningsuppgift 1 till TypeScript.