Oleksii
/
Homeworks_Oleksii.L


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM1</title>
    <style>
        .inp {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div style="display: flex; flex-direction: column; width: 140px; margin: 0 auto; margin-bottom: 25px;">
        <input type="number" placeholder="breakfast calories" id="breakfast" class="inp">
        <input type="number" placeholder="lunch calories" id="lunch" class="inp">
        <input type="number" placeholder="lunch calories" id="dinner" class="inp">
        <input type="button" value="Calculate" id="calc">
    </div>
    <div id="res" style=" width: 25px; height: 25px; align-items:center; margin: 0 auto; padding: 1em ;">
        0
    </div>
    <script>
        let calculator = document.getElementById("calc");

        let breakFa = document.getElementById("breakfast");
        let lunch = document.getElementById("lunch");
        let dinner = document.getElementById("dinner");
        let result = document.getElementById("res");

        calculator.onclick = function () {
            result.innerText = +breakFa.value + +lunch.value + +dinner.value;
            result.style.backgroundColor = "green";
        };

        function calc() {
            result.innerText = +breakFa.value + +lunch.value + +dinner.value;
            result.style.backgroundColor = '';
        }

        breakFa.oninput = calc;
        lunch.oninput = calc;
        dinner.oninput = calc;
    </script>

    <script src="/DOM1.js"></script>

</body>

</html>