<!-- 2 sekcje lewo,
2 sekcje prawo,
wysokość 200px,
w sekcji 2 jest pole input = x
sekcji 2 jest pole input = y
w sekcji 3 ma byś przycisk losuj -> daje wartość do tych inputów,
sekcja 4 po podwójnym kliknięciu pojawia się wynik mnożenia z tamtych outputów a po wyjechaniu znika -->
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="flexSection">
<section><input type="number" id="x"></section>
<section><input type="number" id="y"></section>
</div>
<div class="flexSection">
<section><button id="losuj">Losuj</button></section>
<section id="wynik"></section>
<script>
let x = document.getElementById("x")
let y = document.getElementById("y")
let wynik = document.getElementById("wynik")
let losuj = document.getElementById("losuj")
function losujXY() {
x = document.getElementById("x").value = Math.round(Math.random()*546)
y = document.getElementById("y").value = Math.round(Math.random()*546)
}
function pokazWynik() {
wynik.innerText = x*y
}
function zniknijWynik() {
wynik.innerText = ""
}
losuj.addEventListener("click",losujXY)
wynik.addEventListener("dblclick",pokazWynik)
wynik.addEventListener("mouseleave",zniknijWynik)
</script>
</body>
</html>