<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bayram Ekin</title>
</head>
<style>
.container {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to right, #D7DBDD, #FDEBD0);
opacity: 0.7;
}
.calculate-number1{
position: absolute;
float: left;
}
.Number1, .Number2, .operator, .equal{
width: 40px;
text-align: center;
background-color: blue;
color: white;
border: 1px solid gray;
padding: 10px;
font-size: 30px;
}
span{
position: absolute;
margin-left: 4px;
background: #F9E79F;
color: black;
font-weight: bolder;
width: 45px;
height: 34px;
padding: 10px;
color: black;
font-size: 30px;
border: 1px solid gray;
text-align: center;
}
.btn{
margin-top: 10px;
background: #2E4053;
width: 126.5%;
height: 35px;
border-radius: 10px;
box-shadow: 0 5px 5px 0 rgba(0,0,0,0.6);
}
.btn:hover{
background-color: #85929E;
}
</style>
<body>
<div class="container">
<div class="calculate-number1">
<input type="text" class="Number1" />
<input type="text" class="operator" />
<input type="text" class="Number2" />
<input type="text" value="=" class="equal" />
<span id="result"></span><br/>
<button type="button" class="btn" onclick="hesapla()">
cal
</button>
</div>
</div>
<script>
function hesapla(num1, op, num2) {
var num1 = parseInt(document.querySelector("input.Number1").value);
var num2 = parseInt(document.querySelector("input.Number2").value);
var op = document.querySelector("input.operator").value;
let result;
var sonuc=document.getElementById("result");
switch (op) {
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
default:
alert("+, -, *, / dört işlem dışında değerler girdiniz.");
break;
}
sonuc.innerHTML = result;
}
</script>
</body>
</html>
