index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Taschenrechner</title>
</head>
<body>
    <h1>Taschenrechner</h1>

    <form id="calculatorForm">
        <label for="num1">Nummer 1:</label>
        <input type="number" id="num1" name="num1" required>

        <label for="num2">Nummer 2:</label>
        <input type="number" id="num2" name="num2" required>

        <label for="operation">Operation:</label>
        <select id="operation" name="operation" required>
            <option value="add">Addition</option>
            <option value="sub">Subtraktion</option>
            <option value="mul">Multiplikation</option>
            <option value="div">Division</option>
        </select>

        <button type="button" onclick="calculate()">Ergebnis</button>
    </form>

    <h2>Ergebnis: <span id="result"></span></h2>

    <script>
        function calculate() {
            const num1 = document.getElementById('num1').value;
            const num2 = document.getElementById('num2').value;
            const operation = document.getElementById('operation').value;

            fetch(`http://localhost:3000/${operation}/${num1}/${num2}`)
                .then(response => response.json())
                .then(data => {
                    document.getElementById('result').innerText = data.result;
                })
                .catch(error => console.error('Error:', error));
        }
    </script>
</body>
</html>