Calculator Source Code
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Calculator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="suraj kumar">
<style type="text/css">
*{
margin:0;
padding: 0;
}
body{
font-family:arial;
font-weight: bold;
}
header{
background-color:darkblue;
}
header h1{
color: white;
font-size: 60px;
text-align: center;
}
.form_style{
background-color: silver;
width: 350px;
height: 500px;
margin: 25px auto;
border:8px solid black;
border-radius: 12px;
box-shadow: 8px 4px 0px 4px black;
}
#text_box{
width: 332px;
height: 100px;
margin: 5px;
font-size: 30px;
border-style: groove;
border-color: black;
border-width: 4px;
}
#btn1{
width: 80px;
height: 50px;
margin: 5px;
font-size: 24px;
border: 2px solid red;
border-radius: 10px;
background-color: black;
color: white;
box-shadow: 3px 2px 0px 0px red;
}
#btn2{
width: 80px;
height: 50px;
margin: 5px;
font-size: 24px;
border: 2px solid red;
border-radius: 10px;
background-color: black;
color: white;
box-shadow: 3px 2px 0px 0px red;
}
#btn4{
width: 55px;
height: 50px;
margin: 5px;
font-size: 24px;
border: 2px solid red;
border-radius: 10px;
background-color: black;
color: white;
box-shadow: 3px 2px 0px 0px red;
}
#equal_btn{
width: 338px;
height: 50px;
margin: 5px;
font-size: 24px;
border: 2px solid red;
border-radius: 10px;
background-color: black;
color: white;
box-shadow: 3px 2px 0px 0px red;
}
#clear_btn{
width: 338px;
height: 50px;
margin: 5px;
font-size: 24px;
border: 2px solid red;
border-radius: 10px;
background-color: black;
color: white;
box-shadow: 3px 2px 0px 0px red;
}
</style>
</head>
<body>
<header>
<h1>
Simple Calculator
</h1>
</header>
<div class="form_style">
<form name="forms">
<input type="text" name="ansers" id="text_box"><br>
<input type="button" value=" 1 " onclick="forms.ansers.value +='1' " id="btn1">
<input type="button" value=" 2 " onclick="forms.ansers.value +='2' " id="btn1">
<input type="button" value=" 3 " onclick="forms.ansers.value +='3' " id="btn1">
<input type="button" value=" + " onclick="forms.ansers.value +='+' " id="btn4"><br>
<input type="button" value=" 4 " onclick="forms.ansers.value +='4' " id="btn1">
<input type="button" value=" 5 " onclick="forms.ansers.value +='5' " id="btn1">
<input type="button" value=" 6 " onclick="forms.ansers.value +='6' " id="btn1">
<input type="button" value=" - " onclick="forms.ansers.value +='-' " id="btn4"><br>
<input type="button" value=" 7 " onclick="forms.ansers.value +='7' " id="btn1">
<input type="button" value=" 8 " onclick="forms.ansers.value +='8' " id="btn1">
<input type="button" value=" 9 " onclick="forms.ansers.value +='9' " id="btn1">
<input type="button" value=" x " onclick="forms.ansers.value +='*' " id="btn4"><br>
<input type="button" value=" 0 " onclick="forms.ansers.value +='0' " id="btn1">
<input type="button" value=" 00 " onclick="forms.ansers.value +='00' " id="btn2">
<input type="button" value=" . " onclick="forms.ansers.value +='.' " id="btn2">
<input type="button" value=" / " onclick="forms.ansers.value +='/' " id="btn4"><br>
<input type="button" value=" = " onclick="forms.ansers.value =eval(forms.ansers.value) " id="equal_btn"><br>
<input type="button" value="CS" onclick="forms.ansers.value =' ' " id="clear_btn">
</form>
</div>
</body>
</html>
Comments
Post a Comment