CALCULATOR (USING HTML CSS JS)
<html>
<head>
<title>Simple Calculator (HTML+CSS+JS(Eventhandling))
</title>
<style>
#main
{
height:750px;
width:600px;
position:relative;
top:200px;
margin:auto; border-style:double; border-width:12px; border-radius:2px; border-color:gray; text-align:center; background-color:#000066;
}
input
{
width:122px;
height:100px;
border-width:16px; border-radius:2px;
font-size:50px; text-weight:bold; font-family:"times new roman"; text-shadow:2px 2px 0px black; background-color:pink;
}
#text
{
width:520px; background-color:lightblue ; height:130px;
font-size:50px;
border-width:15px;
}
#symbol:hover
{
background-color:violet;
}
h1
{
text-align:center;
color:yellow;
font-size:90px;
text-shadow:5px 5px 2px #8080ff;
text-decoration:underline}
body
{
background:black;
}
#clear:hover
{
background-color:red;
}
input:hover
{
background-color:khaki;
}
p{
text-align:center;
font-size:90px;
text-shadow:5px 5px 2px orange;
}
</style>
</head>
<body>
<
<div id="main">
<form name="forms">
<br>
<br>
<input type="text" name="answer" id="text" placeholder="CALCULATOR" >
<br/>
<br/>
<br/>
<input type="button" value=" 1 " onclick="forms.answer.value+='1' ">
<input type="button" value=" 2 " onclick="forms.answer.value+='2' ">
<input type="button" value=" 3 " onclick="forms.answer.value+='3' ">
<input type="button" value=" = " onclick="forms.answer.value=eval(forms.answer.value)" id="symbol">
<br/>
<br/>
<input type="button" value=" 4 " onclick="forms.answer.value+='4' ">
<input type="button" value=" 5 " onclick="forms.answer.value+='5' ">
<input type="button" value=" 6 " onclick="forms.answer.value+='6' ">
<input type="button" value="C" id="clear" onclick="forms.answer.value=' '" >
<br/>
<br/>
<input type="button" value=" 7 " onclick="forms.answer.value+='7' ">
<input type="button" value=" 8 " onclick="forms.answer.value+='8' ">
<input type="button" value=" 9 " onclick="forms.answer.value+='9' ">
<input type="button" value=" 0 " onclick="forms.answer.value+='0' ">
<br/>
<br>
<input type="button" value=" + " onclick="forms.answer.value+='+'" id="symbol" >
<input type="button" value=" - " onclick="forms.answer.value+='-'" id="symbol">
<input type="button" value=" * " id="symbol" onclick="forms.answer.value+='*' ">
<input type="button" value=" / " onclick="forms.answer.value+='/'" id="symbol">
<br/>
</div>
</form>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<h1>SIMPLE CALCULATOR</h1>
<p>
➕
➖
➗
</p>
</br>
</body>
</html>
Comments
Post a Comment