<!-- dwa inputy x i y,
w drugiej obrazek, po kliknięciu w obrazek jego szerokość na x i wysokość na y
pole i obwód-->
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
<section>
x: <input id="x" type="number">
y: <input id="y" type="number">
<button id="submit" type="submit">submit</button>
</section>
<section>
<img alt="dies" id="img" src="img/dies.gif">
</section>
<section id="wynik"></section>
<script>
let inputX = document.getElementById("x")
let inputY = document.getElementById("y")
let img = document.getElementById("img")
let wynik = document.getElementById("wynik")
let submit = document.getElementById("submit")
inputX.addEventListener("keypress", sparawdzCzyEnter)
inputY.addEventListener("keypress", sparawdzCzyEnter)
img.addEventListener("click", obliczenia)
submit.addEventListener("click", obliczenia)
function sparawdzCzyEnter(event) {
if (event.key == "Enter") {
obliczenia()
}
}
function obliczenia() {
let x = inputX.value
let y = inputY.value
if (x >= 0 && y >= 0) {
let pole = x * y
let obwod = (2 * x) + (2 * y)
img.style.height = `${x}px`
img.style.width = `${y}px`
wynik.innerHTML = `Pole: ${pole} px² <br>Obwód: ${obwod} px`
} else wynik.innerText = `Liczby są ujemne, a nie mogą być takie!!!`
}
</script>
</body>
</html>
