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.


  • 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">

  <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 class="row">
        <button value="4">4</button>
        <button value="5">5</button>
        <button value="6">6</button>
        <button value="-" class="operator">-</button>
      <div class="row">
        <button value="1">1</button>
        <button value="2">2</button>
        <button value="3">3</button>
        <button value="*" class="operator">*</button>
      <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>

* {
  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;


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

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

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

function calculate(event) {

  const clickedButtonValue =;

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

    display.value += clickedButtonValue;




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