Wednesday 7 February 2018

Claculater in HTML, CSS, && JAVASCRIPT

Claculater in HTML, CSS, && JAVASCRIPT

Claculater in HTML, CSS, && JAVASCRIPT

<html>
<head>
<title>Calculater</title>
<style type="text/css">
.formstyle {
width:300px;
height:410px;
margin:auto;
border:1px solid silver;
background:blue;
border-top-left-radius:8px;
border-top-right-radius:8px;
border-bottom-left-radius:9px;
border-bottom-right-radius:10px;
}
input{
width:50px;
height:1cm;
border-radius:7px;
margin-left:15px;
}
input:hover {
background:#00ff40;
color:white;
}
#ans{
width:100.19999%;
text-align:right;
background:black;
color:white;
height:50px;
font-size:30px;
margin-right:15p;
margin-left:-1px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
overflow-x:scroll;
}
#clear {
width:25%;
}
</style>
</head>
<body style="padding:50px;" >
<div class="formstyle" >
<form name="form" class="" >
<input type="text" name="answere" id="ans" ><br> <br>
<input type="button" value=" 1 "  onclick="form.answere.value += '1'">
<input type="button" value=" 2 "  onclick="form.answere.value += '2'">
<input type="button" value=" 3 "  onclick="form.answere.value += '3'">
<input type="button" value=" •  "  onclick="form.answere.value += '.'">
<br> <br>
<input type="button" value=" 4 "  onclick="form.answere.value += '4'">
<input type="button" value=" 5 "  onclick="form.answere.value += '5'">
<input type="button" value=" 6 "  onclick="form.answere.value += '6'">
<input type="button" value=" 00 "  onclick="form.answere.value += '00'">
<br> <br>
<input type="button" value=" 7 "  onclick="form.answere.value += '7'">
<input type="button" value=" 8 "  onclick="form.answere.value += '8'">
<input type="button" value=" 9 "  onclick="form.answere.value += '9'">
<input type="button" value=" Ï€ "  onclick="form.answere.value += '3.14'">
<br> <br>
<input type="button" value=" + "  onclick="form.answere.value += '+'">
<input type="button" value=" - "  onclick="form.answere.value += '-'">
<input type="button" value=" x "  onclick="form.answere.value += '*'">
<input type="button" value=" ( "  onclick="form.answere.value += '('">
<br> <br>
<input type="button" value=" ÷ "  onclick="form.answere.value += '/'">
<input type="button" value=" 0 "  onclick="form.answere.value += '0'">
<input type="button" value=" = "  onclick="form.answere.value = eval(form.answere.value)">
<input type="button" value=" ) "  onclick="form.answere.value += ')'">
<br> <br>
<input type="button" value=" % "  onclick="form.answere.value += '%'">
<input type="button" value="CE" onclick="form.answere.value = ''" id="clear" >
<input type="button" value="&larr;" onclick="be()" />
</form>
</div>
<script type="text/javascript">
function be() {
form.answere.value=form.answere.value.slice(0,form.answere.value.length-1);
}

</script>
</body>
</html>


0 comments:

Post a Comment