function berechneNote(p) {
  if (p >= 90) return "sehr gut";
  if (p >= 75) return "gut";
  if (p >= 60) return "befriedigend";
  if (p >= 50) return "ausreichend";
  return "nicht bestanden";
}

function getFarbe(note) {
  switch (note) {
    case "sehr gut":
    case "gut":
      return "green";
    case "befriedigend":
      return "orange";
    case "ausreichend":
      return "orangered";
    default:
      return "red";
  }
}

document.addEventListener("DOMContentLoaded", () => {
  const input = document.getElementById("punkteInput");
  const btn = document.getElementById("berechnenBtn");
  const output = document.getElementById("ergebnis");
  const bar = document.getElementById("progressBar");

  btn.addEventListener("click", () => {
    const wert = parseFloat(input.value);

    // VALIDIERUNG
    const isValid =
      !isNaN(wert) && wert >= 0 && wert <= 100;

    input.style.borderColor = isValid ? "" : "red";

    if (!isValid) {
      output.textContent = "Bitte gültige Punkte (0–100) eingeben!";
      output.style.color = "red";
      bar.style.width = "0%";
      return;
    }

    const note = berechneNote(wert);
    const farbe = getFarbe(note);

    output.textContent = `${wert}% = ${note}`;
    output.style.color = farbe;

    bar.style.width = wert + "%";
    bar.style.background = farbe;
  });
});