calculator in js

Java Script

JS based examples

HTML

CSS

<html>
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		#calculator
		{
			margin-left:396px;
			margin-top: 206px;
			padding: 1%;
			width : 20%;
			height: 50%;
			background-color: #999;
		}
		#display
		{
			border : solid #999 2px;
            margin-bottom: 2px;
            padding-left:  -3px;
		}
		.button
		{
			width: 40px;
					}
					.button1
					{
						width:40px;
					}
		#shift
		{
			margin-right: 4px;
		}
	</style>
</head>
<body>
<form id="calculator">
	<input type ="text" name="display" id="display"   disabled="true" >
</br>
<input type="button" id="shift" class="dis"value="NO" class="button1"onclick="">
<input type="button" id="clear"  value="AC" class="button" onclick="er()" disabled=true>
<input type="button" id="on" value="ON" class="button" onclick="ondisabled()">
<input type="button" id="off" value="OFF"class="button" onclick="offdisabled()">
		</br>
<input type="button" id="one"  value="1" class="button" onclick="calculator.display.value +='1'" disabled=true>
<input type="button" id="two" value="2" class="button" onclick="calculator.display.value +='2'" disabled=true>			<input type="button" id="three" value="3" class="button" onclick="calculator.display.value +='3'" disabled=true>
<input type="button" id="plus" value="+" class="button" onclick="calculator.display.value +='+'" disabled=true>
		</br>
<input type="button" id="four" value="4" class="button" onclick="calculator.display.value +='4'" disabled=true>
<input type="button" id="five" value="5" class="button" onclick="calculator.display.value +='5'"disabled=true>
<input type="button" id="six" value="6" class="button" onclick="calculator.display.value +='6'" disabled=true>
<input type="button" id="minus" value="-" class="button" onclick="calculator.display.value +='-'" disabled=true>
</br>
<input type="button" id="seven" value="7" class="button" onclick="calculator.display.value +='7'" disabled=true>
<input type="button" id="eight" value="8" class="button" onclick="calculator.display.value +='8'" disabled=true>
<input type="button" id="nine" value="9" class="button" onclick="calculator.display.value +='9'" disabled=true>
<input type="button" id="multiply" value="X"class="button" onclick="calculator.display.value +='*'" disabled=true>
		</br>			
<input type="button" id="dot" value="." class="button" onclick="calculator.display.value +='.'" disabled=true>
<input type="button" id="zero" value="0" class="button" onclick="calculator.display.value +='0'" disabled=true>
<input type="button" id="equal" value="=" class="button" onclick="e()" disabled=true>
<input type="button" id="divide" value="/" class="button" onclick="calculator.display.value +='/'" disabled=true></td>
		</br>
</form>

</body>
</html>
<script type="text/javascript">
	
	function ondisabled()
	{
		var w = document.getElementById("display");
		w.placeholder = "0";
		console.log("inside ondisabled");
		document.getElementById("one").disabled = false;
		document.getElementById("two").disabled = false;
		document.getElementById("three").disabled = false;
		document.getElementById("four").disabled = false;
		document.getElementById("five").disabled = false;
		document.getElementById("six").disabled = false;
		document.getElementById("seven").disabled = false;
		document.getElementById("eight").disabled = false;
		document.getElementById("nine").disabled = false;
		document.getElementById("zero").disabled = false;
		document.getElementById("plus").disabled = false;
		document.getElementById("minus").disabled = false;
		document.getElementById("multiply").disabled = false;
		document.getElementById("divide").disabled = false;
		document.getElementById("equal").disabled = false;
		document.getElementById("dot").disabled = false;
		document.getElementById("clear").disabled = false;
	}
		function offdisabled()
	{
		var w = document.getElementById("display");
		w.value = "";
		w.placeholder = "";
		console.log("inside ondisabled");
		document.getElementById("one").disabled = true;
		document.getElementById("two").disabled = true;
		document.getElementById("three").disabled = true;
		document.getElementById("four").disabled = true;
		document.getElementById("five").disabled = true;
		document.getElementById("six").disabled = true;
		document.getElementById("seven").disabled = true;
		document.getElementById("eight").disabled = true;
		document.getElementById("nine").disabled = true;
		document.getElementById("zero").disabled = true;
		document.getElementById("plus").disabled = true;
		document.getElementById("minus").disabled = true;
		document.getElementById("multiply").disabled = true;
		document.getElementById("divide").disabled = true;
		document.getElementById("equal").disabled = true;
		document.getElementById("dot").disabled = true;
		document.getElementById("clear").disabled = true;
	}
	function e()
	{  var x = document.getElementById("display").value;
	    console.log(x);
	    var operator = ["+" , "-" , "*" , "/"];
	    console.log(operator);
	    var q = -1;
	    for(var i=0;i<= x.length-1 ; i++)
	    {
	    	if(operator.includes(x[i]) && (x[i] == x[i+1]))
	    	 q=i;
	    }
	    var expression;
	    var rad = document.getElementById("display");
	    	console.log(q);
	    	if(q == -1)
	    	{
	    		expression = x;
               // var express = eval(x);
               // rad.value = express;
               // console.log(express);
	    	}
	    	else
	    	{
	    	var newstr = x.substring(0,q+1)+ x.substring(q+2,x.length);
	    	console.log(newstr);
	    	expression = newstr;
	    	// var newd = eval(newstr);
	    	 // var rad = document.getElementById("display");
	    	 // rad.innerHTML = eval(x);
             // rad.value = newd;
             // console.log(newd);
         }
          
            	
}
</script>
[codepen_embed height="265" theme_id="default" slug_hash="WNbGgwd" default_tab="js,result" user="rajputadesh"]See the Pen WNbGgwd by rajput adesh (@rajputadesh) on CodePen.[/codepen_embed]
Python

Java

C

C++

HTML/CSS

Java Script

PHP

SQL

C Programs

Calculator in JS

Video/ C Introduction
