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.
A simple jquery calculator for beginners#100DaysOfCode #jQuery #calculator #freeCodeCamp #CodeNewbies #WomenWhoCode #html #CSS #javascript https://t.co/XVYDP1L0za pic.twitter.com/fQUCDmCej8
— Developers Doors (@DevelopersDoors) January 4, 2021
For my other programming archives -> Go.
If any queries please comment below.
848 total views