Friday 1 May 2020

Computer Science Science & Technology Software Engineering Create a scientific calculator using html , css & javascript

Create a scientific calculator using html , css & javascript

by on in , ,

Code of Scientific Calculator:

Html & Javascript code : Step 1

Copy Below code & paste in example.html file

<html>
<head>
<link rel="stylesheet" type="text/css" href="calc.css">
<title>Scientific Calculator</title>
<script lang="javascript">
var x,y,z;
function evaluation(f1){
 var result=eval(f1.display.value);
 
 f1.display.value=result;
 }
 
function exp(f1){
  f1.display.value=Math.exp(f1.display.value);
}
 


 function sin(f1){
 f1.display.value=Math.sin(f1.display.value);
 } 
 function cos(f1){
 f1.display.value=Math.cos(f1.display.value);
 }
 function tan(f1){
 f1.display.value=Math.tan(f1.display.value);
 }
 
 
function pi(f1){
  f1.display.value+=Math.PI;
}
 
 function sqrt(f1){
 f1.display.value=Math.sqrt(f1.display.value);
 }
 function square(f1){
 f1.display.value=eval(f1.display.value)*eval(f1.display.value);
 }
  function power(f1){
  f1.display.value=Math.pow(f1.display.value,f1.display.value);
  }
  function log(f1){
  f1.display.value=Math.log(f1.display.value);
  }
  function del(f1){
  f1.display.value=f1.display.value.substring(0,f1.display.value.length-1)
  }
  function changesign(f1){
  if(f1.display.value.substring(0,1)=='-')
  f1.display.value=f1.display.value.substring(1,f1.display.value.length);
  else
f1.display.value = "-" + f1.display.value 
 
  }
  function fact(f1){
  var i;
  x=f1.display.value;
  y=1;
  for(i=1;i<=x;i++){
y=y*i;
  }
  f1.display.value=y;
  }
  function off(f1){
f1.display.value=" ";
document.getElementById("scn").disabled=true;
document.getElementById("1").disabled=true;
document.getElementById("2").disabled=true;
document.getElementById("3").disabled=true;
document.getElementById("4").disabled=true;
document.getElementById("5").disabled=true;
document.getElementById("6").disabled=true;
document.getElementById("7").disabled=true;
document.getElementById("8").disabled=true;
document.getElementById("9").disabled=true;
document.getElementById("10").disabled=true;
document.getElementById("11").disabled=true;
document.getElementById("12").disabled=true;
document.getElementById("13").disabled=true;
document.getElementById("14").disabled=true;
document.getElementById("15").disabled=true;
document.getElementById("16").disabled=true;
document.getElementById("17").disabled=true;
document.getElementById("19").disabled=true;
document.getElementById("20").disabled=true;
document.getElementById("21").disabled=true;
document.getElementById("22").disabled=true;
document.getElementById("23").disabled=true;
document.getElementById("24").disabled=true;
document.getElementById("25").disabled=true;
document.getElementById("26").disabled=true;
document.getElementById("27").disabled=true;
document.getElementById("28").disabled=true;
document.getElementById("29").disabled=true;
document.getElementById("30").disabled=true;
document.getElementById("31").disabled=true;
document.getElementById("32").disabled=true;
document.getElementById("33").disabled=true;
document.getElementById("34").disabled=true;
document.getElementById("35").disabled=true;
document.getElementById("36").disabled=true;
document.getElementById("37").disabled=true;
document.getElementById("38").disabled=true;
document.getElementById("39").disabled=true;
document.getElementById("40").disabled=true;
  }
  
  function on(f1){
  
document.getElementById("scn").value="0";
document.getElementById("scn").disabled=false;
document.getElementById("1").disabled=false;
document.getElementById("2").disabled=false;
document.getElementById("3").disabled=false;
document.getElementById("4").disabled=false;
document.getElementById("5").disabled=false;
document.getElementById("6").disabled=false;
document.getElementById("7").disabled=false;
document.getElementById("8").disabled=false;
document.getElementById("9").disabled=false;
document.getElementById("10").disabled=false;
document.getElementById("11").disabled=false;
document.getElementById("12").disabled=false;
document.getElementById("13").disabled=false;
document.getElementById("14").disabled=false;
document.getElementById("15").disabled=false;
document.getElementById("16").disabled=false;
document.getElementById("17").disabled=false;
document.getElementById("19").disabled=false;
document.getElementById("20").disabled=false;
document.getElementById("21").disabled=false;
document.getElementById("22").disabled=false;
document.getElementById("23").disabled=false;
document.getElementById("24").disabled=false;
document.getElementById("25").disabled=false;
document.getElementById("26").disabled=false;
document.getElementById("27").disabled=false;
document.getElementById("28").disabled=false;
document.getElementById("29").disabled=false;
document.getElementById("30").disabled=false;
document.getElementById("31").disabled=false;
document.getElementById("32").disabled=false;
document.getElementById("33").disabled=false;
document.getElementById("34").disabled=false;
document.getElementById("35").disabled=false;
document.getElementById("36").disabled=false;
document.getElementById("37").disabled=false;
document.getElementById("38").disabled=false;
document.getElementById("39").disabled=false;
document.getElementById("40").disabled=false;
  
  }



</script>
</head>

<body bgcolor="#E0FFFF">
<div id="container">
<form name="form1">
<div class="screen"><input type="text" id="scn" size="25" name="display" maxlength="50" readonly></div>
<div class="btns">
    <p>
<input type="button" value="sin" id="1" class="button black" onclick="sin(form1)">
<input type="button" value="cos" id="2" class="button black" onclick="cos(form1)">
<input type="button" value="tan" id="3" class="button black" onclick="tan(form1)">
<input type="button" value="Abs" id="4" class="button black" onclick="form1.display.value=Math.abs(form1.display.value)">
<input type="button" value="C" id="5"  class="button black" onclick="form1.display.value=''">
    </p>
<p>
<input type="button" value="&radic;" id="6" class="button black" onclick="sqrt(form1)">
<input type="button" value="x&#50;" id="7" class="button black" onclick="square(form1)">
<input type="button" value="x&#94;" id="8" class="button black" onclick="power(form1)">
<input type="button" value="log" id="9" class="button black" onclick="log(form1)">
<input type="button" value="ln" id="10" class="button black" onclick="form1.display.value=Math.E">
    </p>
<p>
<input type="button" value="&#177" id="11" class="button black" onclick="changesign(form1)">
<input type="button" value="(" id="12" class="button black" onclick="form1.display.value+='('">
<input type="button" value=")" id="13" class="button black" onclick="form1.display.value+=')'">
<input type="button" value="M+" id="14" class="button black" onclick="form1.display.value+='M+'">
<input type="button" value="%" id="15" class="button black" onclick="form1.display.value+='%'">
    </p>
<p>
<input type="button" value="E" id="16" class="button black" onclick="form1.display.value+=2.718">
<input type="button" value="n!" id="17" class="button black" onclick="fact(form1)">
<input type="button" value="ln10" id="19" class="button black" onclick="form1.display.value+=2.302">
<input type="button" value="ln2" id="20" class="button black" onclick="form1.display.value+=0.693">
<input type="button" value="ON" id="18" class="button" style="background-color: #32CD32; color:white;" onclick="on(form1)">
</p>
<p>
<input type="button" value="7" id="21" class="button silver" onclick="form1.display.value+='7'">
<input type="button" value="8" id="22" class="button silver" onclick="form1.display.value += '8' "  >
<input type="button" value="9" id="23" class="button silver" onclick="form1.display.value += '9' ">
<input type="button" value="DEL" id="24" class="button red" onclick="del(form1)">
<input type="button" value="OFF" id="25" class="button red" onclick="off(form1)">
    </p>
<p>
<input type="button" value="4" id="26" class="button silver" onclick="form1.display.value += '4' ">
<input type="button" value="5" id="27" class="button silver" onclick="form1.display.value += '5' ">
<input type="button" value="6" id="28" class="button silver" onclick="form1.display.value += '6' ">
<input type="button" value="X" id="29" class="button silver" onclick="form1.display.value += '*'">
<input type="button" value="/" id="30" class="button silver" onclick="form1.display.value += '/'">
    </p>
<p>
<input type="button" value="1" id="31" class="button silver" name="btn1" onclick="form1.display.value += '1' ">
<input type="button" value="2" id="32" class="button silver" name="btn2" onclick="form1.display.value += '2'">
<input type="button" value="3" id="33" class="button silver" name="btn3" onclick="form1.display.value += '3'">
<input type="button" value="+" id="34" class="button silver" name="btnplus" onclick="form1.display.value += '+'">
<input type="button" value="-" id="35" class="button silver" name="btnminus" onclick="form1.display.value +='-'">
    </p>
<p>
<input type="button" value="0" id="36" class="button silver" onclick="form1.display.value += '0' " >
<input type="button" value="." id="37" class="button silver" onclick="form1.display.value += '.' ">
<input type="button" value="EXP" id="38" class="button silver" onclick="exp(form1)">
<input type="button" value="&#960;" id="39" class="button silver" onclick="pi(form1)">
<input type="button" value="=" id="40" class="button silver" name="btnequals" onclick="evaluation(form1)">
    </p>
</div>
</form>
</div>
</body>
</html>


CSS code : Step 2

Copy below code & paste into calc.css file

#container{
background-color: #87CEFA;
height:450px;
width:300px;
border-radius:10px;
margin-left:40%;
margin-top:100px; 
}
.screen{
background-color:#ffff99;
height:55px;
width:280px;
position:relative;
top:15px;
left:10px
}
.screen input{
position:relative;
left:1px;
top:1px;
height:53px;
width:277px;
color:black;
background-color:#efdfao;
text-align:right;
font-size:20px;
}
.btns{
position:relative;
top:5px;
left:10px;
}
.button{
width:40px;
height:30px;
border-radius:6px;
border:none;
margin-left:10px;
cursor:pointer;
}
.button.black{
background-color:black;
color:white;
border-bottom:2px solid #647489;
border-top:2px solid black;
}
.button.red{
background-color:red;
color:white;
border-bottom:#647489;
}
.button.silver{
background-color:#647489;
color:white;
border-bottom:#black;
}
p{
 line-height:30px;
}


By -
Labels: , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)