<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Krokodille</title>
    <style>
        img {
            height: 100px;
        }

        div {
            background-color: gray;
        }
    </style>
</head>

<body>
    <div>
        Poeng: <div id="points"></div>
        <img src="../../Crocodile.svg.png">
        <div>Lovlige operatorer '<' og '>' og '=' og '==' </div>
                <div id="number1">

                </div>
                <input id="operator">
                <div id="number2">
                </div>
                <div>
                    <button onclick="check()">Submit</button>
                    <button onclick="randomNumber()">Reset</button>
                </div>
        </div>

        <script>
            let points = 0;
            var number1
            var number2
            document.getElementById('points').innerHTML = `${points}`;
            function randomNumber() {
                number1 = Math.floor(Math.random() * 10) + 1;
                number2 = Math.floor(Math.random() * 10) + 1;
                document.getElementById('number1').innerHTML = `${number1}`;
                document.getElementById('number2').innerHTML = `${number2}`;
            }
            function check() {
                let operator = document.getElementById("operator").value;
                if (operator = '=') {
                    operator = '==';
                }
                console.log(eval(number1 + operator + number2));
                if (eval(number1 + operator + number2)) {
                    ++points;
                    document.getElementById('points').innerHTML = `${points}`;
                } else {
                    alert('It is Wrong! to use Alert');
                }
            }
        </script>
</body>

</html>