<!-- --------------- Created By InCoder --------------- -->
<!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>Calculator - InCoder</title>
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div class="inCalculatorBox">
    <form name="calculator" onsubmit="return false">
      <div class="resultBox">
        <div class="searchInput">
          <input type="text" id="calc" name="calc" disabled>
        </div>
        <div class="resultInput">
          <input type="text" id="result" disabled>
        </div>
      </div>
      <div class="buttonsBox">
        <button type="button" class="7">7</button>
        <button class="8">8</button>
        <button class="9">9</button>
        <button class="divide operator">/</button><br>
        <button class="4">4</button>
        <button class="5">5</button>
        <button class="6">6</button>
        <button class="multiply operator">*</button><br>
        <button class="1">1</button>
        <button class="2">2</button>
        <button class="3">3</button>
        <button class="minus operator">-</button><br>
        <button class="dot">.</button>
        <button class="0">0</button>
        <button class="clear">AC</button>
        <button class="plus operator">+</button><br>
        <button class="calculate">=</button>
      </div>
    </form>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</body>

</html>
/* --------------- Created By InCoder --------------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

body {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  background: rgb(243, 244, 246);
}

.inCalculatorBox {
  min-width: 12rem;
  width: 17.8rem;
  border-radius: 20px;
  background: #fff;
  transition: box-shadow 0.2s;
}

.inCalculatorBox:hover {
  box-shadow: 0px 6px 10px rgb(209, 213, 219);
}

.resultBox input {
  border: 0;
  width: 84%;
  padding: 5px;
  padding-right: 0.6rem;
  outline: none;
  font-size: 20px;
  font-weight: 600;
  margin-top: 1rem;
  text-align: right;
  margin-left: 1rem;
  margin-bottom: 8px;
  margin-right: 1rem;
  border-radius: 5px;
  letter-spacing: 1.5px;
  background-color: rgb(209, 213, 219, 20%);
}

.resultInput input {
  background-color: transparent !important;
}

.searchInput input::-webkit-input-placeholder {
  font-size: 14px;
}

.buttonsBox {
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  border-radius: 30px 30px 20px 20px;
  background: rgb(229, 231, 235);
}

.buttonsBox button {
  width: 3.5rem;
  margin: 4px 4px;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  font-size: 16px;
  padding: 0.8rem;
  text-align: right;
  border-radius: 8px;
  background: rgb(229, 231, 235);
}

.buttonsBox button:hover {
  box-shadow: 0px 0px 2px rgb(209, 213, 219, 100%);
}

.calculate {
  text-align: center !important;
  width: 100% !important;
  color: rgb(225, 29, 72);
}

.buttonsBox .operator {
  font-weight: 700;
  margin-right: 0px;
  color: rgb(225, 29, 72);
}

$(document).ready(function () {
            let calc = $('#calc');

            $('.1').click(function () {
                document.calculator.calc.value += 1;
                calc.focus();
            });

            $('.2').click(function () {
                document.calculator.calc.value += 2;
                calc.focus();
            });

            $('.3').click(function () {
                document.calculator.calc.value += 3;
                calc.focus();
            });

            $('.4').click(function () {
                document.calculator.calc.value += 4;
                calc.focus();
            });

            $('.5').click(function () {
                document.calculator.calc.value += 5;
                calc.focus();
            });

            $('.6').click(function () {
                document.calculator.calc.value += 6;
                calc.focus();
            });

            $('.7').click(function () {
                document.calculator.calc.value += 7;
                calc.focus();
            });

            $('.8').click(function () {
                document.calculator.calc.value += 8;
                calc.focus();
            });

            $('.9').click(function () {
                document.calculator.calc.value += 9;
                calc.focus();
            });

            $('.0').click(function () {
                document.calculator.calc.value += 0;
                calc.focus();
            });

            $('.dot').click(function () {
                document.calculator.calc.value += '.';
                calc.focus();
            });

            $('.divide').click(function () {
                document.calculator.calc.value += '/';
                calc.focus();
            });

            $('.multiply').click(function () {
                document.calculator.calc.value += '*';
                calc.focus();
            });

            $('.minus').click(function () {
                document.calculator.calc.value += '-';
                calc.focus();
            });

            $('.plus').click(function () {
                document.calculator.calc.value += '+';
                calc.focus();
            });

            $('.calculate').click(function () {
                calcVal();
            });

            $('.clear').click(function () {
                document.calculator.calc.value = '';
                document.calculator.result.value = '';
            });

            calc.on('keyup', function(e){
                if(e.keyCode == 13){
                    calcVal();
                }
            });

            function calcVal(){
                if (document.calculator.calc.value == "") {
                    alert("Enter any numbers to calculate!");
                } else {
                    document.calculator.result.value = eval(document.calculator.calc.value);
                }
            }
        });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.