document.addEventListener("DOMContentLoaded", function() {
  const eingabe = document.getElementById("eingabe");
  const buttons = Array.from(document.querySelectorAll(".button"));
  const variables = {};

  buttons.forEach(button => {
    button.addEventListener("click", () => {
      const value = button.dataset.value;
      if (value === "calc") {
        calculate();
      } else if (value === "C") {
        eingabe.value = "";
      } else if (value === "del") {
        eingabe.value = eingabe.value.substring(0, eingabe.value.length - 1);
      } else if (value === "CA") {
        clearAll();
      } else {
        eingabe.value += value;
      }
    });
  });

  eingabe.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
      calculate();
    }
  });

  function calculate() {
    try {
      const input = eingabe.value;
      if (input.includes("x")) {
        eingabe.value = solveEquation(input);
      } else {
        let result = evaluateExpression(input);
        eingabe.value = result;
      }
    } catch (e) {
      eingabe.value = "Error";
    }
  }

  function clearAll() {
    eingabe.value = "";
    for (let key in variables) {
      delete variables[key];
    }
  }

  function evaluateExpression(input) {
    input = input.replace(/s+/g, ''); // Entfernt alle Leerzeichen
    input = input.replace(/(d+)!/g, (match, number) => {
      return factorial(parseInt(number));
    });
    input = input.replace(/(d+)√(d+)/g, (match, index, radicand) => {
      return Math.pow(parseInt(radicand), 1 / parseInt(index));
    });
    for (const [varName, varValue] of Object.entries(variables)) {
      const varRegex = new RegExp(`\b${varName}\b`, 'g');
      input = input.replace(varRegex, varValue);
    }
    return eval(input);
  }

  function factorial(n) {
    return n === 0 ? 1 : n * factorial(n - 1);
  }

  function solveEquation(equation) {
    const sides = equation.split('=');
    if (sides.length !== 2) {
      eingabe.value = "Fehler";
      return;
    }

    let [leftSide, rightSide] = sides;
    const variableMatch = /([a-zA-Z])/.exec(leftSide + rightSide);
    if (!variableMatch) {
      eingabe.value = "Fehler";
      return;
    }

    const variable = variableMatch[1];
    const solver = (left, right) => {
      return (evaluateExpression(right) - evaluateExpression(left)) / (evaluateExpression(left.replace(variable, '1')) - evaluateExpression(left.replace(variable, '0')));
    };

    const solution = solver(leftSide, rightSide);
    if (typeof solution === 'number') {
      variables[variable] = solution;
      eingabe.value = `${variable} = ${solution}`;
    } else {
      eingabe.value = "Fehler";
    }
  }
});

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

#calculator {
  border: 5px solid #ccc;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#eingabe {
  width: 100%;
  font-size: 24px;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.button {
  width: 20%;
  padding: 20px;
  margin: 1%;
  font-size: 18px;
  border: none;
  background-color: #264d37;
  cursor: pointer;
  border-radius: 5px;
  box-sizing: border-box;
}

.button:hover {
  background-color: #ddd;
}

.button.special {
  background-color: #ffcc00;
}

.button.empty {
  background-color: #fff;
}

.button.special:hover {
  background-color: #ffdd55;
}

.button.red {
  background-color: #ff0000;
  color: #fff;
}

.button.red:hover {
  background-color: #ff5555;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

<div id="calculator">
  <input type="text" id="eingabe" placeholder="Rechnung">
  <div class="button-container">
    <button class="button" data-value="1">1</button>
    <button class="button" data-value="2">2</button>
    <button class="button" data-value="3">3</button>
    <button class="button special" data-value="del">⌫</button>
    <button class="button" data-value="4">4</button>
    <button class="button" data-value="5">5</button>
    <button class="button" data-value="6">6</button>
    <button class="button special" data-value="C">C</button>
    <button class="button" data-value="7">7</button>
    <button class="button" data-value="8">8</button>
    <button class="button" data-value="9">9</button>
    <button class="button special" data-value="calc">=</button>
    <button class="button" data-value="0">0</button>
    <button class="button" data-value="(">(</button>
    <button class="button" data-value=")">)</button>
    <button class="button special" data-value="CA">CA</button>
    <button class="button" data-value="!">!</button>
    <button class="button" data-value="2√">√</button>
    <button class="button" data-value="+">+</button>
    <button class="button" data-value="-">-</button>
    <button class="button" data-value="*">x</button>
    <button class="button" data-value="/">÷</button>
    <button class="button" data-value="**">x^y</button>
    <button class="button empty" data-value=""></button>
  </div>
</div>