zad_6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input id="num1" type="number" placeholder="first number">
    <input id="num2" type="number" placeholder="second number">

    <button onclick="sumInputs()">Sum</button>
    <button onclick="subtractInputs()">Subtract</button>
    <button onclick="multiplyInputs()">Multiply</button>
    <button onclick="divideInputs()">Divide</button>

    <p id="result"></p>

    <script>
        function getData(){
            const num1 = Number(document.getElementById('num1').value)
            const num2 = Number(document.getElementById('num2').value)
            let paragraph = document.getElementById('result')
            return {number1: num1, number2: num2, paragraphElement: paragraph}
        }

        function sumInputs(){
            let data = getData()
            let sum = data.number1 + data.number2
            data.paragraphElement.innerHTML = `The sum is: ${sum}`
        }

        function subtractInputs(){
            let data = getData()
            let result = Math.abs(data.number1 - data.number2)
            data.paragraphElement.innerHTML = 'The diff is: ' + result
        }

        function multiplyInputs(){
            let data = getData()
            let result = data.number1 * data.number2
            data.paragraphElement.innerHTML = result
        }

        function divideInputs(){
            let data = getData()
            let result = data.number1 / data.number2
            data.paragraphElement.innerHTML = result
        }

    </script>
</body>
</html>