Category: Web development

A simple jquery calculator application

I had created a simple jquery calculator using HTML, CSS and jquery only. Though it is simple, it will be helpful for beginners for web developing.

I use codepen.io platform to create this application. This platform is helpful to easily create small web apps, flutter apps, react apps.

HTML code

To display the output <input> element is used here. To display the input element without editing it we need to use a read-only attribute for the input element.

I simply use <table> element to create the buttons for the calculator. You can also use other options such as flexbox or grid. It’s up to your choice. 

<div class="wrapper">
  <div class="display">
    <input type="text" value="0" readonly></input>
  </div>
  <div class="button">
    <table>
      <tr>
        <td><button id="num" onclick="insrt(1)">1</button></td>
        <td><button id="num" onclick="insrt(2)">2</button></td>
        <td><button id="num" onclick="insrt(3)">3</button></td>
        <td><button id="num" onclick="insrt('+')">+</button></td>
      </tr>
      <tr>
        <td><button id="num" onclick="insrt(4)">4</button></td>
        <td><button id="num" onclick="insrt(5)">5</button></td>
        <td><button id="num" onclick="insrt(6)">6</button></td>
        <td><button id="num" onclick="insrt('-')">-</button></td>
      </tr>
      <tr>
        <td><button id="num" onclick="insrt(7)">7</button></td>
        <td><button id="num" onclick="insrt(8)">8</button></td>
        <td><button id="num" onclick="insrt(9)">9</button></td>
        <td><button id="num" onclick="insrt('*')">x</button></td>
      </tr>
      <tr>
        <td><button id="exp" onclick="cl()">C</button></td>
        <td><button id="num" onclick="insrt(0)">0</button></td>
        <td><button id="exp" onclick="eql()">=</button></td>
        <td><button id="num" onclick="insrt('/')">/</button></td>
      </tr>
    </table>
  </div>
</div>

CSS

* {
  font-family: monospace;
  font-size: 20px;
}

.wrapper {
  margin: 0 auto;
  width: 500px;
  border: 1px solid grey;
  border-radius: 10px;
  background: #ddd;
}
.display {
  margin: 10px auto;
  width: 480px;
  height: 100px;
  border: 1px solid grey;
  border-radius: 10px;
  font-size:2rem;
  background: #dfd;
  color: grey;
}

.display input{
  display: block;
  margin:20px auto;
  height:60px;
  width:420px;
  font-size:1.5rem;
  border-style:none;
  border-radius:10px;
  overflow:hidden;
}

.button {
  width: 500px;
  height: 500px;
}

.button #exp{
  background-color:orange;
}
.button table {
  table-layout: fixed;
  width: 500px;
  height: 500px;
}

.button table tr td {
  padding: 10px;
}
.button table button {
  width: 100%;
  height: 100px;
  font-weight: bold;
  border-style: none;
  border-radius: 10px;
  background: grey;
  color: white;
}

.button table button:hover {
  background: white;
  border: 1px solid grey;
  color: grey;
}

Jquery

function insrt(num){
  if( $('.display input').val()==0)
   $('.display input').val('');
  $('.display input').val($('.display input').val()+num);
}
function eql(){
  $('.display input').val(eval($('.display input').val()));
}
function cl(){
  $('.display input').val(0);
}

insrt() function is used for inserting the numbers from 0-9 and +, - , x, /.

eq() function used for evaluating the expression in the input.

To evaluate the expression in input, eval() function used to evaluate the expression.

For reference of eval() refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval

cl() function used for clearing the input and display 0.

The below output is an embed of codepen. You can use this to test or run the application.

For my other programming archives -> Go.

If any queries please comment below.

 848 total views