Bootstrap Friendly - Try it code with live demo

Go back to tutorial

<!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>Try it your self</title>
        
        <style>
            :root {
  --background-color: #1e1e2f;
  /* Dark background for the container */
  --container-background: #2d2d44;
  /* Darker background for the container */
  --button-background: #4b4b6d;
  /* Dark gray for buttons */
  --button-hover-background: #666688;
  /* Lighter gray for buttons on hover */
  --operation-background: #ff6f61;
  /* Coral for operations */
  --operation-hover-background: #e95e50;
  /* Darker coral on hover */
  --equal-background: #00b894;
  /* Teal for equal button */
  --equal-hover-background: #009b77;
  /* Darker teal on hover */
  --input-background: #3a3b3c;
  /* Darker input field */
  --text-color: #ffffff;
  /* White text for contrast */
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  background-color: var(--container-background);
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  width: 310px;
  max-width: 100%;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.button {
  width: 60px;
  /* padding: 18px; */
  margin: 0 5px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  background: linear-gradient(145deg, #3f3f5c, #1e1e2f);
  color: var(--text-color);
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), inset 2px 2px 5px rgba(0, 0, 0, 0.3);
  height: 60px;
  line-height: 59px;
}

.erase_icon {
  width: 20px;
}

.button:hover {
  background: linear-gradient(145deg, #2b2b42, #4b4b6d);
  transform: scale(1.1);
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);

}

.button:active {
  transform: scale(0.95);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.row {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}

div#output_are {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  min-height: 30px;
  padding: 10px;
  text-wrap: wrap;
  width: 100%;
  word-break: break-all;
  border-radius: 20px;
  border: none;
  outline: none;
  color: #fff;
  text-align: right;
  letter-spacing: 1px;
  font-size: 17px;
  line-height: 22px;
}

.button.operation {
  background: linear-gradient(145deg, #ff7f7f, #ff6f61);
}

.button.operation:hover {
  background: linear-gradient(145deg, #e95e50, #ff6f61);
  transform: scale(1.1);
}

.button.equal {
  background: linear-gradient(145deg, #00b894, #00a78e);
}

.button.equal:hover {
  background: linear-gradient(145deg, #009b77, #00b894);
  transform: scale(1.1);
}
        </style>
    </head>

<body>
        <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <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 flex flex-col item-center">
    <div class="row">
      
      <div  id="output_are">0</div>
    </div>
    <div class="row">
      <button class="button operation" value="ac">AC</button>
      <button class="button operation"  value="%">%</button>
      <button class="button operation" value="/">/</button>
      <button class="button operation" value="er">
        <svg pointer-events="none" class="erase_icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="#ffffff" d="M576 128c0-35.3-28.7-64-64-64L205.3 64c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7L512 448c35.3 0 64-28.7 64-64l0-256zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"/></svg>
      </button>
    </div>
    <div class="row">
      <button class="button" value="7">7</button>
      <button class="button" value="8">8</button>
      <button class="button" value="9">9</button>
      <button class="button operation" value="*">x</button>
    </div>
        <div class="row">
      <button class="button" value="4">4</button>
      <button class="button" value="5">5</button>
      <button class="button" value="6">6</button>
      <button class="button operation" value="+">+</button>
    </div>
        <div class="row">
      <button class="button" value="1">1</button>
      <button class="button" value="2">2</button>
      <button class="button" value="3">3</button>
      <button class="button operation" value="-">-</button>
    </div>
        <div class="row">
      <button class="button" value="0">0</button>
      <button class="button" value="00">00</button>
      <button class="button" value=".">.</button>
      <button class="button equal" value="=">=</button>
    </div>
  </div>

Array.from(buttons).forEach((button) => {
  button.addEventListener('click', (e) => {
    const inputField = document.querySelector('#output_are');

// Define a regex to match operator buttons
    const operators = /[/*\-+%=]/;

switch (e.target.getAttribute('value')) {
      case '=':
        console.log(e.target.getAttribute('value'));
        // Check if string has a valid expression
        if (string && !operators.test(string.slice(-1))) {
          try {
            string = eval(string).toString();
            inputField.innerHTML = string;
            resultDisplayed = true;
          } catch (error) {
            string = "";
            inputField.innerHTML = "";
          }
        } else {
          inputField.innerHTML = "";
        }
        break;

case 'ac':
        string = "";
        inputField.innerHTML = string;
        resultDisplayed = false;
        break;

case 'er':
        console.log("aa");
        string = string.slice(0, -1);
        inputField.innerHTML = string;
        break;

default:
        // Continue the operation if an operator is pressed after result is displayed
        if (resultDisplayed && operators.test(e.target.getAttribute('value'))) {
          resultDisplayed = false;
        }

// Start fresh if a number is entered after the result is displayed
        if (resultDisplayed && !operators.test(e.target.getAttribute('value'))) {
          string = "";
          resultDisplayed = false;
        }

// Prevent multiple leading zeros
        if (e.target.getAttribute('value') === '0' || e.target.getAttribute('value') === '00') {
          if (string === "" || string === "0") {
            // If string is empty or already '0', don't append more zeros
            string = "";
          } else {
            string += e.target.getAttribute('value');
          }
        } else if (e.target.getAttribute('value') === '%') {
          if (string && !operators.test(string.slice(-1))) {
            // Convert the current number to percentage
            try {
              string = (eval(string) / 100).toString();
              inputField.innerHTML = string;
              resultDisplayed = true;
            } catch (error) {
              string = "";
              inputField.innerHTML = "";
            }
          }
        } else if (operators.test(e.target.getAttribute('value'))) {
          // Allow operator if the string is not empty and the last character is not an operator
          if (string && !operators.test(string.slice(-1))) {
            string += e.target.getAttribute('value');
          }
        } else {
          string += e.target.getAttribute('value');
        }

inputField.innerHTML = string;
        break;
    }
  });
});
        </script>
    </body>

</html>