Simple calculator using Java Script, HTML and CSS

Create a simple calculator in JavaScript, HTML, and CSS, In this JS exercise tutorial, Create a Java Script application to perform a arithmetic operation and create a calculator application using Java Script, HTML, and CSS.

Problem Statement

In this, you have to create a simple calculator using the HTML, CSS, Js functions. First, create an HTML file, use CSS files and use the javascript function so that the function returns a result on the output screen.

Solution

Create HTML file as xyz.html
Create two sections of calculator that is for keys and for display answer use div class=” calculator” and div class=” keys“
Next, create 4 rows for keys use div class=”row” for button use <button value=”7″>7</button> likewise create all buttons.
Use CSS to style buttons and view of the calculator
In javascript, to select all the buttons use document.querySelectorAll(‘button’);
Add eventListener to each button that waits for an event to occur (that is the user clicked mouse or will pressed the keys) using button.addEventListener(‘click’, calculate);
To perform operation we have created calculate function taking event as a first agrment like this function calculate(event)
Inside this function, we will Calculate and display the answer use eval() function, (eval() is used to evaluate the function) like this display.value = eval(display.value);
At last, in order to clear everything on display screen use clickedButtonValue === ‘C’.

JS code to create a simple calculator

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Calculator</title>
</head>
<body>

  <div class="calculator">

    <input type="text" class="display" disabled>
    <div class="keys">
      <div class="row">
        <button value="7">7</button>
        <button value="8">8</button>
        <button value="9">9</button>
        <button value="+" class="operator">+</button>
      </div>
      <div class="row">
        <button value="4">4</button>
        <button value="5">5</button>
        <button value="6">6</button>
        <button value="-" class="operator">-</button>
      </div>
      <div class="row">
        <button value="1">1</button>
        <button value="2">2</button>
        <button value="3">3</button>
        <button value="*" class="operator">*</button>
      </div>
      <div class="row">
        <button value="C" class="operator">C</button>
        <button value="0">0</button>
        <button value="/" class="operator">/</button>
        <button value="=" class="operator">=</button>
      </div>
    </div>

  </div>
</body>
<style>
  
* {
  padding: 0;
  margin: 0;
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #222831;
  font-family: sans-serif;
}


.calculator {
  width: 200px;
  padding-bottom: 15px;
  border-radius: 7px;
  background-color: #000;
  box-shadow: 5px 8px 8px -2px rgba(0, 0, 0, 0.61);
}
.display {
  width: 100%;
  height: 80px;
  border: none;
  box-sizing: border-box;
  padding: 10px;
  font-size: 2rem;
  background-color: #FFC0CB;
  color: #000;
  text-align: right;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
}

.row {
  display: flex;
  justify-content: space-between;
}
button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  outline: none;
  font-size: 2rem;
  background-color: #222;
  color: #fff;
  margin: 10px;
}

button:hover {
  cursor: pointer;
}

.operator {
  background-color: #FFC0CB;
  color: #000;
}


</style>
<script>
  

const buttons = document.querySelectorAll('button');

const display = document.querySelector('.display');

buttons.forEach(function(button) {
  button.addEventListener('click', calculate);
});

function calculate(event) {

  const clickedButtonValue = event.target.value;

  if (clickedButtonValue === '=') {
  
    if (display.value !== '') 
    {
      display.value = eval(display.value);
    }
  } else if (clickedButtonValue === 'C') 
  {
    display.value = '';
  } else {

    display.value += clickedButtonValue;
  }
}

</script>
</html>

Output

Thus, in this way, we learn How to create a simple Calculator using HTML, CSS, and JavaScript.