Untitled

<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.calculator {
  width: 300px;
  margin: 0 auto;
}

.input-field {
  width: 50px;
  height: 30px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
}

.button {
  width: 50px;
  height: 30px;
  background-color: blue;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
</style>
</head>
<body>
<div class="calculator">
  <input type="text" class="input-field" id="first-number" />
  <input type="text" class="input-field" id="second-number" />
  <button class="button" id="add">+</button>
  <button class="button" id="subtract">-</button>
  <button class="button" id="multiply">*</button>
  <button class="button" id="divide">/</button>
  <p id="result"></p>
</div>
<script>
function calculate() {
  var firstNumber = document.getElementById("first-number").value;
  var secondNumber = document.getElementById("second-number").value;
  var operation = document.getElementById("operation").value;

  var result = 0;
  switch (operation) {
    case "+":
      result = firstNumber + secondNumber;
      break;
    case "-":
      result = firstNumber - secondNumber;
      break;
    case "*":
      result = firstNumber * secondNumber;
      break;
    case "/":
      result = firstNumber / secondNumber;
      break;
  }

  document.getElementById("result").innerHTML = result;
}

document.getElementById("add").addEventListener("click", calculate);
document.getElementById("subtract").addEventListener("click", calculate);
document.getElementById("multiply").addEventListener("click", calculate);
document.getElementById("divide").addEventListener("click", calculate);
</script>
</body>
</html>
Editor is loading...