Real Time Calculator using HTML, CSS, and JavaScript

Javascript Web Development Front End Technology

In this article, we are going to discuss how to develop a Real-Time Calculator using HTML, CSS, and JavaScript. Usually, if we observe any real-time calculator we know that it has −

A grid of numbers (0-9 and 00).
Some basic athematic operators (+, -, /, x, %).
And some symbols for special operations such as (clear, backspace, equal)

The output of our desired program will be as shown below −

However, for this we need a UI and logical programming to handle the operations; where UI is a user interface in which the user interacts with an application or a website. In this context, by the interface, we mean the things displayed in the output. They can include a display screen, buttons, input fields, etc.

Use of HTML

In this program, we are using HTML to create content for the calculator UI; that means we are creating boxes, input fields, buttons, etc.

Use of CSS

We are using CSS for managing the content of HTML like the content color, width, height, font size, padding, margin, etc.

Use of JavaScript

In a calculator, it is established that there are different buttons and all these buttons have different functions. For example, the + button performs the addition operation, and – performs the subtraction, and it is possible to assign these operations to these buttons using JavaScript.

Developing a Real-Time Calculator

Following are the files in HTML, CSS, and JavaScript respectively to develop the real-time calculator −

calculator.html

This is the HTML file for our calculator below. Here, we are using the HTML script to create the content of the calculator UI. We are including the buttons of a calculator, input fields, etc.

In the HTML code, we are also using an onclick event; it means that whenever the user clicks on any of the buttons then the corresponding operation is performed at the backend of the calculator.

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="stylesheet" href="Calc.css">
   <title>Calulator</title>
</head>
<body>
   <div class="main">
      <input type="text" id = 'res'>
      <div class="btn">
         <input type="button" value = 'C' onclick = "Clear()">
         <input type="button" value = '%' onclick = "Solve('%')">
         <input type="button" value = '←' onclick ="Back('←')">
         <input type="button" value = '/' onclick = "Solve('/')">
         <br>
         <input type="button" value = '7' onclick = "Solve('7')">
         <input type="button" value = '8' onclick = "Solve('8')">
         <input type="button" value = '9' onclick = "Solve('9')">
         <input type="button" value = 'x' onclick = "Solve('*')">
         <br>
         <input type="button" value = '4' onclick = "Solve('4')">
         <input type="button" value = '5' onclick = "Solve('5')">
         <input type="button" value = '6' onclick = "Solve('6')">
         <input type="button" value = '-' onclick = "Solve('-')">
         <br>
         <input type="button" value = '1' onclick = "Solve('1')">
         <input type="button" value = '2' onclick = "Solve('2')">
         <input type="button" value = '3' onclick = "Solve('3')">
         <input type="button" value = '+' onclick = "Solve('+')">
         <br>
         <input type="button" value = '00'onclick = "Solve('00')">
         <input type="button" value = '0' onclick = "Solve('0')">
         <input type="button" value = '.' onclick = "Solve('.')">
         <input type="button" value = '=' onclick = "Result()">
      </div>
   </div>
   <script src = 'Calc.js' ></script>
</body>
</html>

calculator.css

Following is the CSS file for our calculator; we are using CSS for managing the contents of HTML like putting content color, width, height, font size, padding, margin, etc.

*{
   padding: 0;
   margin: 0;
   font-family: 'poppins', sans-serif;
}
body{
   background-color: #495250;
   display: grid;
   height: 100vh;
   place-items: center;
}
.main{
   width: 400px;
   height: 450px;
   background-color: white;
   position: absolute;
   border: 5px solid black;
   border-radius: 6px; 
}
.main input[type='text'] {
   width: 88%;
   position: relative;
   height: 80px;
   top: 5px;
   text-align: right;
   padding: 3px 6px;
   outline: none;
   font-size: 40px;
   border: 5px solid black;
   display: flex;
   margin: auto;
   border-radius: 6px;
   color: black;
}
.btn input[type='button']{
   width:90px;
   padding: 2px;
   margin: 2px 0px;
   position: relative;
   left: 13px;
   top: 20px;
   height: 60px;
   cursor: pointer;
   font-size: 18px;
   transition: 0.5s;
   background-color: #495250;
   border-radius: 6px;
   color: white;
}
.btn input[type='button']:hover{
   background-color: black;
   color: white;
}

calculator.js

The JavaScript file in this program is responsible for performing each operation of the calculator, like arithmetic operations, clearing the input fields, backspace, displaying the output, etc.

Following is the JavaScript code to develop the operations of a calculator −


function Solve(val) {
   var v = document.getElementById('res');
   v.value += val;
}
function Result() {
   var num1 = document.getElementById('res').value;
   var num2 = eval(num1);
   document.getElementById('res').value = num2;
}
function Clear() {
   var inp = document.getElementById('res');
   inp.value = '';
}
function Back() {
   var ev = document.getElementById('res');
   ev.value = ev.value.slice(0,-1);
}

Here is the Complete code


<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      *{
         padding: 0;
         margin: 0;
         font-family: 'poppins', sans-serif;
      }
      body{
         background-color: #495250;
         display: grid;
         height: 100vh;
         place-items: center;
      }
      .main{
         width: 400px;
         height: 450px;
         background-color: white;
         position: absolute;
         border: 5px solid black;
         border-radius: 6px; 
      }
      .main input[type='text'] {
         width: 88%;
         position: relative;
         height: 80px;
         top: 5px;
         text-align: right;
         padding: 3px 6px;
         outline: none;
         font-size: 40px;
         border: 5px solid black;
         display: flex;
         margin: auto;
         border-radius: 6px;
         color: black;
      }
      .btn input[type='button']{
         width:90px;
         padding: 2px;
         margin: 2px 0px;
         position: relative;
         left: 13px;
         top: 20px;
         height: 60px;
         cursor: pointer;
         font-size: 18px;
         transition: 0.5s;
         background-color: #495250;
         border-radius: 6px;
         color: white;
      }
      .btn input[type='button']:hover{
         background-color: black;
         color: white;
      }
   </style>
   <script>
      function Solve(val) {
         var v = document.getElementById('res');
         v.value += val;
      }
      function Result() {
         var num1 = document.getElementById('res').value;
         var num2 = eval(num1);
         document.getElementById('res').value = num2;
      }
      function Clear() {
         var inp = document.getElementById('res');
         inp.value = '';
      }
      function Back() {
         var ev = document.getElementById('res');
         ev.value = ev.value.slice(0,-1);
      }
   </script>
   <title>Calulator</title>
</head>
<body>
   <div class="main">
      <input type="text" id = 'res'>
      <div class="btn">
         <input type="button" value = 'C' onclick = "Clear()">
         <input type="button" value = '%' onclick = "Solve('%')">
         <input type="button" value = '←' onclick ="Back('←')">
         <input type="button" value = '/' onclick = "Solve('/')">
         <br>
         <input type="button" value = '7' onclick = "Solve('7')">
         <input type="button" value = '8' onclick = "Solve('8')">
         <input type="button" value = '9' onclick = "Solve('9')">
         <input type="button" value = 'x' onclick = "Solve('*')">
         <br>
         <input type="button" value = '4' onclick = "Solve('4')">
         <input type="button" value = '5' onclick = "Solve('5')">
         <input type="button" value = '6' onclick = "Solve('6')">
         <input type="button" value = '-' onclick = "Solve('-')">
         <br>
         <input type="button" value = '1' onclick = "Solve('1')">
         <input type="button" value = '2' onclick = "Solve('2')">
         <input type="button" value = '3' onclick = "Solve('3')">
         <input type="button" value = '+' onclick = "Solve('+')">
         <br>
         <input type="button" value = '00'onclick = "Solve('00')">
         <input type="button" value = '0' onclick = "Solve('0')">
         <input type="button" value = '.' onclick = "Solve('.')">
         <input type="button" value = '=' onclick = "Result()">
      </div>
   </div>
   <script src = 'Calc.js' ></script>
</body>
</html>

Vivek Verma

Updated on: 13-Sep-2023

36K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started