Hello Friends My Name Is Viraj,Today I Will Create Basic Calculator On Your Web Page.Calculator is one of the basic project a Javascript or any other language a newbie programmer should probably know how to create. It is a basic project because it entails arithmetic operations. All you have to do is to create a button for each numbers, arithmetic operations. symbols and then add a screen that serves as a screen or lcd.Each buttons created has their own event handlers and functions. Whenever a number button is clicked, it prints the number indicated on the button into the textbox which is the screen. Then when an arithmetic operation is clicked after a value has been entered, it stores the value in the textbox to be the first-number and reset the value in the textbox to zero. After entering the second number you'll be calculating together with the first number and clicking the equals-to button, the equals to button will store the value in the textbox as the second number and then it will check the arithmetic you clicked. Once it checked arithmetic operation you click, it will add or subtracts or multiply or divide the first-number and second-number depending on the arithmetic operation you clicked and then prints the result back to the textbox.This calculator will only have the division, multiplication, addition and subtraction operations but you can easily include more functions if you need.You can also use keyboard number keys to calculate the value. Input type are included in the code for a form which makes ‘textfield’ and ‘button’. Every input field is specified with attribute value. The attribute value specifies the value of an <input> element. Eval() function takes the expression and evaluates it accordingly. ‘On click’ is the event. It occurs when the user clicks on an element.Most of the HTML is coding for all the input buttons and their associated onclick event handlers. All the buttons, except for the = button, will call the cal JavaScript when clicked and passes it’s associated value. The = button calls the calculate JavaScript function and passes the value that is in the text input which represents the string of numbers and operators that were pushed. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.The cal function does 2 things for us. If the user clicks on the C button or the clear button, it accesses the text input object, which represents our calculator screen, via the DOM . Once it is accessed, the value inside the text input is set to ” (2 single quotes) which is an empty string. This will basically remove whatever string is already inside the text input. If the user clicks on any other button, the function will access the text input object and append the value that was passed over to whatever is already in our text input. This allows us to build our string with numbers and operators.The eval() function treats the string as if it were JavaScript code and executes it and returns the results. The function will then access the text input object and replace whatever the current value is with the answer from the eval() function.Here are the steps to create a simple calculator using HTML and JavaScript which can evaluate simple arithmetic on integer numbers. Two types of inputs text and button are used here on a table within a form element and OnClick event was used to insert button values on the screen or to evaluate the numbers.In this article, we will create a calculator step-by-step. We need to create a basic structure using HTML, style it using CSS and make it work using JavaScript.The following creates the div (.box) that represents the structure of the calculator. Inside it are two div tags, one for display (inside this, I added input type="text" to display the result and set this to read only) and one for Keys. There is also an onclick event to be explained later. Here In This Html Tutorial We Will Create Basic Calculator Using Html/Css/Javascript Code.This Calculator Is Combination Of Html/Css/Javascript Code.Here Is An Example For It..
So Let Begin With Our Coding............
Step 1:
<!Doctype html>
<html>
<head>
<title>Javascript Calculator</title>
<!-- CSS Code -->
<style>
body {
background-color:#fff;
margin: 0px auto;
}
.calbody{
background: Yellow;
border: 1px solid #ff0;
padding: 10px;
margin-left: 450px;
min-width: 27.4em;
max-width: 27.4em;
}
h1{
text-align: center;
font-size: 40px;
color: #003652;
}
#lcd{
text-align: right;
width: 23em;
height: 40px;
font-size: 18px;
}
#lcdu{
color: grey;
text-align: right;
width: 27.6em;
height: 35px;
font-size: 15px;
}
button{
background-color: #fff;
width: 80px;
height: 60px;
font-size: 20px;
border: 1px solid #097C9B;
}
button:hover{
background-color: #509CA9;
}
</style>
</head>
<body>
<h1>
Html/Css/Javascript Calculator</h1>
<div class="calbody">
<form name="lcdform">
<input id="lcdu" name="lcdsu" type="text" value="" />
<input id="lcd" name="lcds" type="text" value="0" />
</form>
<div id="calbutton">
<button id="num1" onclick="numone();">1</button>
<button id="num2" onclick="numtwo();">2</button>
<button id="num3" onclick="numthree();">3</button>
<button id="operationplus" onclick="operationplus();">+</button>
<button id="operationraistop" onclick="operationraistop();">^</button>
<button id="num4" onclick="numfour();">4</button>
<button id="num5" onclick="numfive();">5</button>
<button id="num6" onclick="numsix();">6</button>
<button id="operationmult" onclick="operationmult();">*</button>
<button id="operationsqrt" onclick="sqrots();">Sqrt()</button>
<button id="num7" onclick="numseven();">7</button>
<button id="num8" onclick="numeight();">8</button>
<button id="num9" onclick="numnine();">9</button>
<button id="operationminus" onclick="operationminus();">-</button>
<button id="clr" onclick="clr();">C</button>
<button id="operationperc" onclick="operationperc();">%</button>
<button id="num0" onclick="numzero();">0</button>
<button id="num00" onclick="numdobuzero();">00</button>
<button id="operationdivid" onclick="operationdivid();">/</button>
<button id="sumbit" onclick="equalsto();">=</button>
</div>
</div>
<!-- Javascript code -->
<script>
var firstnumber;
var secondnumber;
var result;
var operations;
function numone(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "1";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";
}
}
function numtwo(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "2";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";
}
}
function numthree(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "3";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";
}
}
function numfour(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "4";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";
}
}
function numfive(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "5";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";
}
}
function numsix(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "6";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";
}
}
function numseven(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "7";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";
}
}
function numeight(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "8";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "8";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";
}
}
function numnine(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "9";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";
}
}
function numzero(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "0";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "0";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";
}
}
function numdobuzero(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
return;
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";
}
}
function clr(){
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = "";
return;
}
function operationplus(){
operation = "+";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
//alert(firstnumber);
}
function operationmult(){
operation = "*";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationminus(){
operation = "-";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationdivid(){
operation = "/";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationperc(){
operation = "%";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function equalsto(){
secondnumber = parseInt(document.lcdform.lcds.value);
if (operation == "+")
{
result = firstnumber + secondnumber;
}
else if (operation == "*"){
result = firstnumber * secondnumber;
}
else if (operation == "-"){
result = firstnumber - secondnumber;
}
else if (operation == "/"){
result = firstnumber / secondnumber;
}
else if (operation == "%"){
if (document.lcdform.lcds.value == "0"){
result = firstnumber / 100;
document.lcdform.lcdsu.value = firstnumber + operation + "100";
}
else if (document.lcdform.lcds.value != "0") {
result = firstnumber / secondnumber * 100;
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;
}
}
else if (operation == "^"){
for (var i = 0; i < secondnumber; i++){
result = firstnumber * i;
}
}
document.lcdform.lcds.value ="";
document.lcdform.lcds.value = result.toString();
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();
return;
}
function sqrots(){
firstnumber = document.lcdform.lcds.value;
result = Math.sqrt(parseInt(document.lcdform.lcds.value));
document.lcdform.lcds.value = result;
document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;
}
function operationraistop(){
operation = "^";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
}
</script>
</body>
</html>
Output :
Video Related To Topic
So Let Begin With Our Coding............
Step 1:
<!Doctype html>
<html>
<head>
<title>Javascript Calculator</title>
<!-- CSS Code -->
<style>
body {
background-color:#fff;
margin: 0px auto;
}
.calbody{
background: Yellow;
border: 1px solid #ff0;
padding: 10px;
margin-left: 450px;
min-width: 27.4em;
max-width: 27.4em;
}
h1{
text-align: center;
font-size: 40px;
color: #003652;
}
#lcd{
text-align: right;
width: 23em;
height: 40px;
font-size: 18px;
}
#lcdu{
color: grey;
text-align: right;
width: 27.6em;
height: 35px;
font-size: 15px;
}
button{
background-color: #fff;
width: 80px;
height: 60px;
font-size: 20px;
border: 1px solid #097C9B;
}
button:hover{
background-color: #509CA9;
}
</style>
</head>
<body>
<h1>
Html/Css/Javascript Calculator</h1>
<div class="calbody">
<form name="lcdform">
<input id="lcdu" name="lcdsu" type="text" value="" />
<input id="lcd" name="lcds" type="text" value="0" />
</form>
<div id="calbutton">
<button id="num1" onclick="numone();">1</button>
<button id="num2" onclick="numtwo();">2</button>
<button id="num3" onclick="numthree();">3</button>
<button id="operationplus" onclick="operationplus();">+</button>
<button id="operationraistop" onclick="operationraistop();">^</button>
<button id="num4" onclick="numfour();">4</button>
<button id="num5" onclick="numfive();">5</button>
<button id="num6" onclick="numsix();">6</button>
<button id="operationmult" onclick="operationmult();">*</button>
<button id="operationsqrt" onclick="sqrots();">Sqrt()</button>
<button id="num7" onclick="numseven();">7</button>
<button id="num8" onclick="numeight();">8</button>
<button id="num9" onclick="numnine();">9</button>
<button id="operationminus" onclick="operationminus();">-</button>
<button id="clr" onclick="clr();">C</button>
<button id="operationperc" onclick="operationperc();">%</button>
<button id="num0" onclick="numzero();">0</button>
<button id="num00" onclick="numdobuzero();">00</button>
<button id="operationdivid" onclick="operationdivid();">/</button>
<button id="sumbit" onclick="equalsto();">=</button>
</div>
</div>
<!-- Javascript code -->
<script>
var firstnumber;
var secondnumber;
var result;
var operations;
function numone(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "1";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "1";
}
}
function numtwo(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "2";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "2";
}
}
function numthree(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "3";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "3";
}
}
function numfour(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "4";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "4";
}
}
function numfive(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "5";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "5";
}
}
function numsix(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "6";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "6";
}
}
function numseven(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "7";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "7";
}
}
function numeight(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "8";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "8";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "8";
}
}
function numnine(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
document.lcdform.lcds.value = "9";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "9";
}
}
function numzero(){
if (document.lcdform.lcds.value == "0"){
document.lcdform.lcds.value = "0";
}
else if (document.lcdform.lcds.value == result)
{
document.lcdform.lcds.value = "0";
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "0";
}
}
function numdobuzero(){
if (document.lcdform.lcds.value == "0" || document.lcdform.lcds.value == result){
return;
}
else //if(document.lcdform.lcds.value != "0")
{
documentdocument.lcdform.lcds.value = document.lcdform.lcds.value + "00";
}
}
function clr(){
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = "";
return;
}
function operationplus(){
operation = "+";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
//alert(firstnumber);
}
function operationmult(){
operation = "*";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationminus(){
operation = "-";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationdivid(){
operation = "/";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function operationperc(){
operation = "%";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
document.lcdform.lcdsu.value = firstnumber + operation;
}
function equalsto(){
secondnumber = parseInt(document.lcdform.lcds.value);
if (operation == "+")
{
result = firstnumber + secondnumber;
}
else if (operation == "*"){
result = firstnumber * secondnumber;
}
else if (operation == "-"){
result = firstnumber - secondnumber;
}
else if (operation == "/"){
result = firstnumber / secondnumber;
}
else if (operation == "%"){
if (document.lcdform.lcds.value == "0"){
result = firstnumber / 100;
document.lcdform.lcdsu.value = firstnumber + operation + "100";
}
else if (document.lcdform.lcds.value != "0") {
result = firstnumber / secondnumber * 100;
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + "*100 = " + result;
}
}
else if (operation == "^"){
for (var i = 0; i < secondnumber; i++){
result = firstnumber * i;
}
}
document.lcdform.lcds.value ="";
document.lcdform.lcds.value = result.toString();
document.lcdform.lcdsu.value = firstnumber + operation + secondnumber + " = " + result.toString();
return;
}
function sqrots(){
firstnumber = document.lcdform.lcds.value;
result = Math.sqrt(parseInt(document.lcdform.lcds.value));
document.lcdform.lcds.value = result;
document.lcdform.lcdsu.value = "sqrt(" + firstnumber + ") = " + result;
}
function operationraistop(){
operation = "^";
firstnumber = parseInt(document.lcdform.lcds.value);
document.lcdform.lcds.value = "0";
}
</script>
</body>
</html>
Output :
Video Related To Topic
Good
ReplyDeleteGood
ReplyDelete