Calculator 



HTML Code


<!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</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <div class="container">
        <div class="calculator">
            <input type="text" name="" id="result" placeholder="0">
            <button onclick="allClear()">AC</button>
            <button onclick="del()">DEL</button>
            <button onclick="display('%')">%</button>
            <button onclick="display('/')">/</button>
            <button onclick="display('7')">7</button>
            <button onclick="display('8')">8</button>
            <button onclick="display('9')">9</button>
            <button onclick="display('*')">*</button>
            <button onclick="display('4')">4</button>
            <button onclick="display('5')">5</button>
            <button onclick="display('6')">6</button>
            <button onclick="display('+')">+</button>
            <button onclick="display('1')">1</button>
            <button onclick="display('2')">2</button>
            <button onclick="display('3')">3</button>
            <button onclick="display('-')">-</button>
            <button onclick="display('0')">0</button>
            <button onclick="display('.')">.</button>
            <button onclick="calculate()" class="equal">=</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

-----------------------------------------------------------------------------------------------------------


CSS Code

@import url("https://fonts.googleapis.com/css2?family=Kanit&family=Mulish:wght@300;400;500;600;700&family=Roboto+Condensed&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: bold;
  font-size: 22px;
  color: #ff6525;
  background: #ecf0f3;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  background: #ecf0f3;
  padding: 15px;
  border-radius: 30px;
  box-shadow: inset 5px 5px 12px #fff, 5px 5px 12px rgba(0, 0, 0, 0.14);
  display: grid;
  grid-template-columns: repeat(4, 70px);
}

input {
  grid-column: span 4;
  height: 70px;
  width: 269px;
  background-color: #ecf0f3;
  border: none;
  box-shadow: inset -5px -5px 12px #fff, inset 5px 5px 12px rgba(0, 0, 0, 0.14);
  border-radius: 30px;
  outline: none;
  font-size: 50px;
  text-align: end;
  margin: 30px auto;
  padding: 3px 15px;
}

input::placeholder {
  color: #ff6525;
}

button {
    width: 48px;
    height: 48px;
    box-shadow: inset 5px 5px 12px #fff,  5px 5px 12px rgba(0, 0, 0, 0.14);
    border: none;
    border-radius: 50%;
    outline: none;
    margin: 6px auto;
    cursor: pointer;
}

.equal {
    width: 115px;
    border-radius: 40%;
    margin: 6px 12px;
}

-------------------------------------------------------------------------------------------------------------

JAVASCRIPT Code

var result = document.getElementById('result');


function display(number) {
    result.value = result.value + number ;
}

function calculate () {

    var final_number = result.value;
    var final_result = eval(final_number);
    result.value = final_result;
}

function allClear() {
    result.value = "";
}

function del() {
    result.value = result.value.slice(0,-1);
}

--------------------------------------------------------------------------------------------------------------

link => References