Create CASIO fx-100MS Scientific Calculator in HTML & CSS

Scientific Calculator CODE:

<html>   

<head>

<title>

CASIO Scientific Calculator fx-100MS

</title>

<style>

.title {

margin-bottom: 10px;

padding: 5px 5px 5px 5px;

font-size: 20px;

font-weight:bold;

text-align:center;

width: 500px;

background-color:black;

color:white;

border: solid black 2px;

}

#grayBtn {

width: 100%;

height: 40px;

font-size: 30px;

background-color:gray;

color: white;

border: solid black 2px;

width:96px

}

#blackBtn {

width: 100%;

height: 40px;

font-size: 30px;

background-color:black;

color: white;

border: solid black 2px;

width:80px

}

#redBtn {

width: 100%;

height: 40px;

font-size: 30px;

background-color:red;

color: white;

border: solid black 2px;

width:96px

}

input[type=”text”] {

background-color:white;

font-size: 50px;

border: solid black 2px;

width:500px;

height: 60px;

}

</style>

<script>

function backspace(calci) {

size = calci.display.value.length;

calci.display.value = calci.display.value.substring(0, size-1);

}

function CalculateResult(calci) {

if(calci.display.value.includes(“!”)) {

size = calci.display.value.length;

n = Number(calci.display.value.substring(0, size-1));

f = 1;

for(i = 2; i <= n; i++)

f = f*i;

calci.display.value = f;

}

else if(calci.display.value.includes(“%”)) {

size = calci.display.value.length;

n = Number(calci.display.value.substring(0, size-1));

calci.display.value = n/100;

}

else   

calci.display.value = eval(calci.display.value);

}

</script>

</head>

<body>

<div class = title >

   CASIO &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Scientific Calculator &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp fx-100MS

   <marquee> <small> By Swebllc.com </small> </marquee>

</div>

<form name = “calci”>

<table id = “calci” border = 2>

<tr>

<td><input id=”txt” name=”display”

onkeypress=”return event.charCode >= 48

&& event.charCode <= 57″ type=”text”>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td><input id=”blackBtn” type=”button” value=”sqrt”

OnClick=”calci.display.value+=’Math.sqrt(‘”>

</td>

<td><input id=”blackBtn” type=”button” value=”pi”

OnClick=”calci.display.value+=’Math.PI'”>

</td>

<td><input id=”blackBtn” type=”button” value=”^”

OnClick=”calci.display.value+=’Math.pow(‘”>

</td>

<td><input id=”blackBtn” type=”button” value=”sin”

OnClick=”calci.display.value=’Math.sin(‘”>

</td>

<td><input id=”blackBtn” type=”button” value=”cos”

OnClick=”calci.display.value=’Math.cos(‘”>

</td>

<td><input id=”blackBtn” type=”button” value=”tan”

OnClick=”calci.display.value=’Math.tan(‘”>

</td>

</tr>

<tr>

<td><input id=”blackBtn” type=”button” value=”n!”

OnClick=”calci.display.value+=’!'”>

</td>

<td><input id=”blackBtn” type=”button” value=”%”

OnClick=”calci.display.value+=’%'”>

</td>

<td><input id=”blackBtn” type=”button” value=”(“

OnClick=”calci.display.value+='(‘”>

</td>

<td><input id=”blackBtn” type=”button” value=”)”

OnClick=”calci.display.value+=’)'”>

</td>   

<td><input id=”blackBtn” type=”button” value=”log”

OnClick=”calci.display.value=’Math.log(‘”>

</td>

<td><input id=”blackBtn” type=”button” value=”,”

OnClick=”calci.display.value+=’,'”>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td><input id=”grayBtn” type=”button” value=”7″

OnClick=”calci.display.value+=’7′”>

</td>

<td><input id=”grayBtn” type=”button” value=”8″

OnClick=”calci.display.value+=’8′”>

</td>

<td><input id=”grayBtn” type=”button” value=”9″

OnClick=”calci.display.value+=’9′”>

</td>

<td><input id=”redBtn” type=”button” value=”DEL”

OnClick=”backspace(this.form)”>

</td>

<td><input id=”redBtn” type=”button” value=”AC”

OnClick=”calci.display.value=””>

</td>

</tr>

<tr>

<td><input id=”grayBtn” type=”button” value=”4″

OnClick=”calci.display.value+=’4′”>

</td>

<td><input id=”grayBtn” type=”button” value=”5″

OnClick=”calci.display.value+=’5′”>

</td>

<td><input id=”grayBtn” type=”button” value=”6″

OnClick=”calci.display.value+=’6′”>

</td>

<td><input id=”grayBtn” type=”button” value=”*”

OnClick=”calci.display.value+=’*'”>

</td>

<td><input id=”grayBtn” type=”button” value=”/”

OnClick=”calci.display.value+=’/'”>

</td>

</tr>

<tr>

<td><input id=”grayBtn” type=”button” value=”1″

OnClick=”calci.display.value+=’1′”>

</td>

<td><input id=”grayBtn” type=”button” value=”2″

OnClick=”calci.display.value+=’2′”>

</td>

<td><input id=”grayBtn” type=”button” value=”3″

OnClick=”calci.display.value+=’3′”>

</td>

<td><input id=”grayBtn” type=”button” value=”+”

OnClick=”calci.display.value+=’+'”>

</td>

<td><input id=”grayBtn” type=”button” value=”-“

OnClick=”calci.display.value=’-‘”>

</td>

</tr>

<tr>

<td><input id=”grayBtn” type=”button” value=”0″

OnClick=”calci.display.value+=’0′”>

</td>

<td><input id=”grayBtn” type=”button” value=”.”

OnClick=”calci.display.value+=’.'”>

</td>

<td><input id=”grayBtn” type=”button” value=”EXP”

OnClick=”calci.display.value=’Math.exp(‘”>

</td>

<td><input id=”grayBtn” type=”button” value=”ANS”

OnClick=”CalculateResult(this.form)”>

</td>

<td><input id=”grayBtn” type=”button” value=”=”

OnClick=”CalculateResult(this.form)”>

</td>

</tr>

</table>

</td>

</tr>

</table>

</form>

</body>

</html>