Simple Calculator app using Jquery

Thanks to a friend who helped me get along with jquery. Though I’m a beginner, I would like to post a simple blog on jquery that might seem helpful for rookies like me.

Let me explain how to create a simple calculator using jquery and please dont have great expectations on the calculator that I’ve used here.  Mine is gonna be a simple rookie app.

Lets get started.


<script src="//"></script>
<script type="text/javascript">

var v = $(this).val();
$('#answer').val($('#answer').val() + v);
var c =$('#answer').val();


<div style="width:190px; margin:auto; border:2px solid scarlet;">
<form action="" id="calculator">
<input type="hidden" id="operation" value=""/>
<input type="hidden" id="prev_value" value=""/>
<input type="text" id="answer" value="" style="width:68%; height:35px;" disabled="disabled"/><br>
<button type="button" id="1" value="1" class="number">1</button><button type="button" id="2" value="2" class="number">2</button><button type="button" id="3" class="number" value="3">3</button><button type="button" value="/" class="symbol" id="/">/</button><br>
<button type="button" id="4" value="4" class="number">4</button><button type="button" value="5" id="5" class="number">5</button><button type="button" value="6" id="6" class="number">6</button><button type="button" class="symbol" value="*" id="*">*</button><br>
<button type="button" id="7" value="7" class="number">7</button><button type="button" value="8" id="8" class="number">8</button><button type="button" value="9" id="9" class="number">9</button><button type="button" id="-" class="symbol" value="-">-</button><br>
<button type="button" value="0" id="0" class="number">0</button><button type="button" class="equals" id="=">=</button><button type="button" class="symbol" value="+" id="+">+</button><input type="button" value="C" id="C"><br>
<form action="" id="calculator">

Catch you all soon with a better css to the calculator



Latest posts by abirami vijayakumar (see all)

Leave a Reply

Your email address will not be published. Required fields are marked *