Create Semi Scientific Calculator
There is plenty of methods to create simple and semi Scientific Calculator calculators or Scientific Calculator. A simple calculator can be created just using the HTML and CSS codes. But for semi simple or semi scientific need some Java script codes. You can for math calculation on desktop computer built in calculators or online. Other creative way to after witch may you will feel happiness when you design a calculator yourself. To create a calculator before you have to know some basic about HTML, CSS and Java. You do not have much idea then W3SCHOOLS is the best platform to learn it. You can learn what ever programming language need it here free of cost and for ever. Although there is paid subscription also available after witch you can learn fro tutorial. Here is How To Create Semi Scientific Calculator With Java CSS.
How To Create Semi Scientific Calculator With Java CSS
In the bellow HTML, CSS and Jave script codes available for making your own calculator. Copy and Past any HTML Editor online platform if you want some changing in it’s design. Otherwise simply copy all three type of codes and past it into built-in computer text editor. Next step to save this with adding .HTML extension. Supposed after copy paste the code in the text editor and you want to save file as name “Calculator”. Your saved file name must be as like this ” Calculator.HTML “. If you already had saved with any name, you can rename it or save as new file with HTML extension.
Once you have clicked ok button for file saving, there will create one shortcut icon as browser. Then you can open and used it in your favorite browser like Google, Firefox, etc.. In all process bellow you not only know about Calculator function, but you will learn some other fundamentals about coding.
Today witch I put coding for calculator, it is for just simplest semi scientific calculator. An Scientific calculator needed bunch of coding and much exercise.
CSS Codes in HTML Headings
<html>
<head>
<style>
.calculator
{
background-color:skyblue;width:500px; height:500px; text-align:center;
}
.cal-box
{
background-color:#3d4543;
height:390px;
width:280px;
border-radius:10px;
position:relative;
left:20%;
}
.display
{
background-color:#222;
width:231px;
position:relative;
left:25px;
top:25px;
height:44px;
}
.display input
{
position:relative;
left:-1px;
width:222px;
top:4px;
height:36px;
color:black;
background-color:#bccd95;
font-size:21px;
text-align:right;
}
.keys
{
position:relative;
top:15px;
left:-8px;
}
.button:active{top:6px}
.button
{
width:40px;
height:30px;
border:none;
border-radius:8px;
margin-left:17px;
cursor:pointer;
border-top:2px solid transparent;
}
.button.gray
{
color:white;
background-color:#6f6f6f;
border-bottom:black 2px solid;
border-top:2px #6f6f6f solid;
}
.button.pink
{
color:black;
background-color:#ff4561;
border-bottom:black 2px solid;
}
.button.black
{
color:white;
background-color:303030;
border-bottom:black 2px solid;
border-top:2px 303030 solid;
}
.button.orange
{
color:black;
background-color:FF9933;
border-bottom:black 2px solid;
border-top:2px FF9933 solid;
}
.gray:active
{
border-top:black 2px solid;
border-bottom:2px #6f6f6f solid;
}
.pink:active
{
border-top:black 2px solid;
border-bottom:#ff4561 2px solid;
}
.black:active
{
border-top:black 2px solid;
border-bottom:#303030 2px solid;
}
.orange:active
{
border-top:black 2px solid;
border-bottom:FF9933 2px solid;
}
.hide{display:none}
</style>
</head>
HTML Codes in Body
<body>
<div class="calculator">
<h2><marquee behavior="alternate" ><font color="White">Calculator Created by Online Assistance Bay</font></marquee></h2>
<form >
<input type="text" class="hide ans" name="ans" readonly size="15" id="ans">
<div class="cal-box">
<div class="display"><input type="text" name="answer" readonly disabled size="15" id="answer"></div>
<div class="keys">
<br/><br/>
<input type="button" class="button gray" value="MCR" onclick='c("Calculator Created......")'><input type="button" class="button gray" value="M-" onclick='c("...............by..................")'><input type="button" class="button gray" value="M+" onclick='c("onlineassistancebay.com")'><input type="button" class="button pink" value="/" onclick='v("/")'></p>
<p><input type="button" class="button black" value="7" onclick='v("7")'><input type="button" class="button black" value="8" onclick='v("8")'><input type="button" class="button black" value="9" onclick='v("9")'><input type="button" class="button pink" value="*" onclick='v("*")'></p>
<p><input type="button" class="button black" value="4" onclick='v("4")'><input type="button" class="button black" value="5" onclick='v("5")'><input type="button" class="button black" value="6" onclick='v("6")'><input type="button" class="button pink" value="-" onclick='v("-")'></p>
<p><input type="button" class="button black" value="1" onclick='v("1")'><input type="button" class="button black" value="2" onclick='v("2")'><input type="button" class="button black" value="3" onclick='v("3")'><input type="button" class="button pink" value="+" onclick='v("+")'></p>
<p><input type="button" class="button black" value="C" onclick='c("")'><input type="button" class="button black" value="0" onclick='v("0")'><input type="button" class="button black" value="." onclick='v("."), dot.disabled=true'><input type="button" class="button orange" value="=" onclick='r()'></p>
<p><input type="button" class="button black" value="00" onclick='v("00")'><input type="button" class="button black" value="√a" onclick="answer.value =Math.sqrt(parseInt(ans.value))"/><input type="button" name="sq" class="button black" value="A++" onclick='s("")'><input type="button" class="button black" value="SQR" onclick='root("")'></p>
</div>
Java Script Codes
<script>
function c(val)
{
document.getElementById("answer").value=val;
document.getElementById("ans").value=val;
document.getElementById("answer").style="font-size:20px;";
}
function v(val)
{
document.getElementById("answer").value+=val;
document.getElementById("ans").value+=val;
}
function s(val)
{
document.getElementById("answer").value= eval(document.getElementById("answer").value)+eval(document.getElementById("ans").value);
}
function root(val)
{
document.getElementById("answer").value= eval(document.getElementById("answer").value)*eval(document.getElementById("ans").value);
}
function r()
{
try
{
c(eval(document.getElementById("answer").value))
}
catch(r)
{
c('Error')
}
}
</script>
</body>
</html>
How To Create Semi Scientific Calculator With HTML CSS
