Ćwiczenia JavaScript – Egzamin INF.03

Zadanie 1 – Kalkulator BMI

Polecenie: Utwórz aplikację, która oblicza wskaźnik BMI na podstawie wzrostu (cm) i masy (kg). Wynik powinien zawierać także opis stanu (niedowaga, norma, nadwaga, otyłość).

function bmi() {
  let waga = parseFloat(document.getElementById("waga").value);
  let wzrost = parseFloat(document.getElementById("wzrost").value) / 100;
  if (!isNaN(waga) && !isNaN(wzrost) && wzrost > 0) {
    let wynik = waga / (wzrost * wzrost);
    let opis = "";
    if (wynik < 18.5) opis = "Niedowaga";
    else if (wynik < 25) opis = "Norma";
    else if (wynik < 30) opis = "Nadwaga";
    else opis = "Otyłość";
    document.getElementById("wynikBMI").textContent =
      "Twoje BMI: " + wynik.toFixed(2) + " (" + opis + ")";
  }
}

Zadanie 2 – Walidacja logowania

Polecenie: Napisz formularz logowania. Login i hasło muszą być uzupełnione, a hasło powinno mieć co najmniej 6 znaków. Po poprawnym zalogowaniu wyświetl komunikat „Witaj, [login]”.

function logowanie() {
  let login = document.getElementById("login").value.trim();
  let haslo = document.getElementById("haslo").value;
  let wynik = document.getElementById("wynikLog");
  if (login === "" || haslo === "") {
    wynik.textContent = "Uzupełnij wszystkie pola!";
  } else if (haslo.length < 6) {
    wynik.textContent = "Hasło musi mieć min. 6 znaków!";
  } else {
    wynik.textContent = "Witaj, " + login;
  }
}

Zadanie 3 – Galeria obrazów

Polecenie: Utwórz galerię obrazów z możliwością filtrowania po kategorii. Obrazy przechowuj w tablicy JS, a następnie dynamicznie wstawiaj do strony.

function galeria() {
  let kat = document.getElementById("kategoria").value;
  let dane = [
    {src: "las.jpg", kat: "krajobrazy"},
    {src: "woda.jpg", kat: "krajobrazy"},
    {src: "gory.jpg", kat: "krajobrazy"},
    {src: "pies.jpg", kat: "zwierzeta"},
    {src: "kot.jpg", kat: "zwierzeta"},
    {src: "pies1.jpg", kat: "zwierzeta"}
  ];
  let div = document.getElementById("galeria");
  div.innerHTML = "";
  for (let el of dane) {
    if (kat === "" || el.kat === kat) {
      let img = document.createElement("img");
      img.src = el.src;
      img.style.width = "120px";
      img.style.margin = "5px";
      div.appendChild(img);
    }
  }
}

Zadanie 4 – Licznik dobrych uczynków

Polecenie: Utwórz licznik, który zwiększa się po każdym kliknięciu przycisku. Wyświetl komunikat „Twój dobry uczynek sprawił, że ktoś się uśmiechnął” oraz aktualną liczbę.

Liczba dobrych uczynków: 0

let licznik = 0;

function dobryUczynek() {
  licznik++;
  document.getElementById("wynikDobry").textContent =
    "Twój dobry uczynek sprawił, że ktoś się uśmiechnął. Liczba dobrych uczynków: " + licznik;
}

Zadanie 5 – Losowe cytaty

Polecenie: Napisz skrypt, który losuje cytat z tablicy i wyświetla go w HTML po kliknięciu przycisku.

let cytaty = [
  "Największe dobro, jakie możesz uczynić komuś, to sprawić, że się uśmiechnie.",
  "Czasem drobny gest znaczy więcej niż tysiące słów.",
  "Nie czekaj na wielkie chwile, twórz małe momenty szczęścia codziennie.",
  "Dobro wraca do tych, którzy je dają."
];

function losujCytat() {
  let index = Math.floor(Math.random() * cytaty.length);
  document.getElementById("wynikCytat").textContent = cytaty[index];
}

Zadanie 6 – Animacja serca

Polecenie: Napisz skrypt, który po kliknięciu przycisku tworzy animowane serce w divie.

function dodajSerce() {
  let div = document.createElement("div");
  div.textContent = "❤️";
  div.style.position = "absolute";
  div.style.fontSize = "24px";
  div.style.left = Math.random() * 80 + "%";
  div.style.top = "100%";
  div.style.transition = "top 2s ease-out";
  document.getElementById("serca").appendChild(div);
  setTimeout(() => { div.style.top = "0"; }, 50);
  setTimeout(() => { div.remove(); }, 2500);
}

Zadanie 7 – Dobry uczynek z sercem

Polecenie: Kliknij przycisk, aby dodać dobry uczynek. Po każdym kliknięciu licznik wzrasta, pojawia się komunikat i animowane serce w divie.