<!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>Technopat</title>
<style>
body {
display: flex;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<form>
<h1>Javascript islem programi</h1>
<input type="number" id="n1" placeholder="Sayi 1" required />
<input type="number" id="n2" placeholder="Sayi 2" required />
<br />
<input type="radio" id="topla" name="operation" />
<label for="topla">Topla</label>
<input type="radio" id="cikar" name="operation" />
<label for="cikar">Cikar</label>
<input type="radio" id="carp" name="operation" />
<label for="carp">Carp</label>
<input type="radio" id="bol" name="operation" />
<label for="bol">Bol</label>
<br />
<button type="submit" id="btn">Hesapla</button>
<input type="submit" value="" />
</form>
<h1 id="sonuc"></h1>
<script>
const btn = document.getElementById("btn");
const result = document.getElementById("sonuc");
btn.addEventListener("click", (e) => {
e.preventDefault();
const n1 = Number(document.getElementById("n1").value);
const n2 = Number(document.getElementById("n2").value);
result.innerHTML = "Sonuc: ";
if (document.getElementById("topla").checked) {
result.innerHTML += n1 + n2;
} else if (document.getElementById("cikar").checked) {
result.innerHTML += n1 - n2;
} else if (document.getElementById("carp").checked) {
result.innerHTML += n1 * n2;
} else if (document.getElementById("bol").checked) {
result.innerHTML += n1 / n2;
}
});
</script>
</body>
</html>