lesson-07/Exercise-7g.html

<!-- in this lesson: -->
<!-- ------------------- -->
<!-- 

    Lesson 7 : Functions
    
    Exercise - 7g  Calculator using functions
   
-->

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator Exercise</title>
    <style>
        body {
            text-align: center;
        }

        button {
            cursor: pointer;
            font-size: 30px;
            height: 60px;
            min-width: 50px;
            padding: 0 10px;
            background-color: white;
            color: black;
            border: 2px solid black;
            transition: all 0.1s linear;
            margin: 5px;
        }

        button:hover {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <p>
        <button onclick="
            updateCalculation('1');
        ">1</button>
        <button onclick="
            updateCalculation('2');
        ">2</button>
        <button onclick="
            updateCalculation('3');
        ">3</button>
        <button onclick="
            updateCalculation(' + ');
        ">+</button>
    </p>
    <p>
        <button onclick="
            updateCalculation('4');
        ">4</button>
        <button onclick="
            updateCalculation('5');
        ">5</button>
        <button onclick="
            updateCalculation('6');
        ">6</button>
        <button onclick="
            updateCalculation(' - ');
        ">-</button>
    </p>
    <p>
        <button onclick="
            updateCalculation('7');
        ">
            7
        </button>
        <button onclick="
            updateCalculation('8');
        ">
            8
        </button>
        <button onclick="
            updateCalculation('9');
        ">
            9
        </button>
        <button onclick="
            updateCalculation(' * ');
        ">
            *
        </button>
    </p>
    <p>
        <button onclick="
            updateCalculation('0');
        ">
            0
        </button>
        <button onclick="
            updateCalculation('.');
        ">
            .
        </button>
        <button onclick="
            calculation = eval(calculation);
            console.log(calculation);
        ">
            =
        </button>
        <button onclick="
            updateCalculation(' / ');
        ">
            /
        </button>
    </p>

    <button onclick="
            calculation = '';
            console.log(calculation);
        ">
        Clear
    </button>


    <script>

        let calculation = '';

        function updateCalculation (value)
        {
            calculation += value;
            console.log(calculation);
        }

    </script>
</body>

</html>