<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.calculator {
width: 200px;
border: 1px solid #ccc;
padding: 10px;
}
.calculator input[type="text"] {
width: 100%;
margin-bottom: 10px;
}
.calculator input[type="button"] {
width: 48%;
margin-bottom: 5px;
}
</style>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var operator = document.getElementById("operator").value;
var result;
if (operator === "+") {
result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
}
document.getElementById("result").value = result;
}
</script>
</head>
<body>
<div class="calculator">
<input type="text" id="num1" placeholder="Enter number 1">
<input type="text" id="num2" placeholder="Enter number 2">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="button" value="Calculate" onclick="calculate()">
<input type="text" id="result" placeholder="Result" readonly>
</div>
</body>
</html>
Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
If you enjoyed what you read here, create your account today and start earning FREE STEEM!