eis-website/js/notenrechner-dom.js

// ====================== AUFGABE 3: NOTENRECHNER DOM-VERSION ======================

/**
 * Berechnet die Note basierend auf der Prozentpunktzahl
 * @param {number} prozentsatz - Der Prozentsatz (0-100)
 * @returns {string} Die entsprechende Note als Text
 */
function berechneNoteDom(prozentsatz) {
  if (prozentsatz >= 90) {
    return "sehr gut";
  } else if (prozentsatz >= 75) {
    return "gut";
  } else if (prozentsatz >= 60) {
    return "befriedigend";
  } else if (prozentsatz >= 50) {
    return "ausreichend";
  } else {
    return "nicht bestanden";
  }
}

/**
 * Gibt die Farbe basierend auf der Note zurück
 * @param {string} note - Die Note
 * @returns {string} Der CSS-Klassennamen für die Farbe
 */
function getFarbeKlasse(note) {
  switch (note) {
    case "sehr gut":
    case "gut":
      return "";
    case "befriedigend":
      return "befriedigend";
    case "ausreichend":
      return "ausreichend";
    case "nicht bestanden":
      return "nicht-bestanden";
    default:
      return "";
  }
}

/**
 * Initialisiert den Notenrechner und registriert Event Listener
 */
document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("notenForm");
  const calculateBtn = document.getElementById("calculateBtn");
  const inputField = document.getElementById("punkte");
  const errorMessage = document.getElementById("errorMessage");
  const resultatDiv = document.getElementById("ergebnis");
  const resultText = document.getElementById("resultText");
  const progressBar = document.getElementById("progressBar");
  const percentageText = document.getElementById("percentageText");

  if (!form || !calculateBtn) {
    return; // Nur auf notenrechner-dom.html verfügbar
  }

  /**
   * Validiert die Eingabe
   * @returns {boolean} true wenn die Eingabe gültig ist, sonst false
   */
  function validateInput() {
    const value = inputField.value.trim();

    // Prüfung: Ist das Feld leer?
    if (value === "") {
      errorMessage.textContent = "Fehler: Bitte geben Sie eine Punktzahl ein.";
      inputField.classList.add("error");
      inputField.style.borderColor = "red";
      return false;
    }

    // Prüfung: Ist es eine Zahl?
    const punkte = parseFloat(value);
    if (isNaN(punkte)) {
      errorMessage.textContent = "Fehler: Bitte geben Sie eine gültige Zahl ein.";
      inputField.classList.add("error");
      inputField.style.borderColor = "red";
      return false;
    }

    // Prüfung: Ist die Zahl zwischen 0 und 100?
    if (punkte < 0 || punkte > 100) {
      errorMessage.textContent = "Fehler: Die Punktzahl muss zwischen 0 und 100 liegen.";
      inputField.classList.add("error");
      inputField.style.borderColor = "red";
      return false;
    }

    // Validierung erfolgreich
    errorMessage.textContent = "";
    inputField.classList.remove("error");
    inputField.style.borderColor = "";
    return true;
  }

  /**
   * Berechnet die Note und zeigt das Ergebnis an
   */
  function calculateGrade() {
    if (!validateInput()) {
      resultatDiv.style.display = "none";
      return;
    }

    const punkte = parseFloat(inputField.value);
    const note = berechneNoteDom(punkte);
    const farbeKlasse = getFarbeKlasse(note);

    // Ergebnis anzeigen
    resultText.textContent = `${punkte} Punkte = ${note}`;

    // Progress Bar aktualisieren
    progressBar.style.width = `${punkte}%`;
    progressBar.textContent = `${punkte}%`;
    progressBar.className = `progress-bar ${farbeKlasse}`;

    // Prozentsatz-Text aktualisieren
    percentageText.textContent = `${punkte}% erreicht`;

    // Resultat-Container anzeigen
    resultatDiv.style.display = "block";
  }

  // Event Listener: Button Click
  calculateBtn.addEventListener("click", (e) => {
    e.preventDefault();
    calculateGrade();
  });

  // Event Listener: Enter-Taste
  inputField.addEventListener("keypress", (e) => {
    if (e.key === "Enter") {
      e.preventDefault();
      calculateGrade();
    }
  });

  // Event Listener: Input ändern (Fehler löschen)
  inputField.addEventListener("input", () => {
    if (inputField.value.trim() !== "") {
      errorMessage.textContent = "";
      inputField.classList.remove("error");
      inputField.style.borderColor = "";
    }
  });
});