Step 1: Open your text editor and type the program and save the program name as "calculator.html"
Step 2: Open another text editor and type the CSS script and save it as "calculator1.css"
Step 3: To link css with html type the below code inside head tag.
<link rel="stylesheet" type="text/css" href="calculator1.css" />
</script>
Program:
calculator.html
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<link rel="stylesheet" type="text/css" href="calculator1.css" />
</script>
</head>
<body>
<div class="wrap">
<form name="cal">
<input type="text" name="display">
<br /><br />
<input type="button" value="9" onclick="cal.display.value+='9'">
<input type="button" value="8" onclick="cal.display.value+='8'">
<input type="button" value="7" onclick="cal.display.value+='7'">
<input type="button" value="C" onclick="cal.display.value= ''" id="del">
<br /> <br />
<input type="button" value="6" onclick="cal.display.value+='6'">
<input type="button" value="5" onclick="cal.display.value+='5'">
<input type="button" value="4" onclick="cal.display.value+='4'">
<input type="button" value="/" onclick="cal.display.value+='/'">
<br /> <br />
<input type="button" value="3" onclick="cal.display.value+='3'">
<input type="button" value="2" onclick="cal.display.value+='2'">
<input type="button" value="1" onclick="cal.display.value+='1'">
<input type="button" value="*" onclick="cal.display.value+='*'">
<br /> <br />
<input type="button" value="0" onclick="cal.display.value+='0'">
<input type="button" value="-" onclick="cal.display.value+='-'">
<input type="button" value="=" onclick="cal.display.value=eval(cal.display.value)">
<input type="button" value="+" onclick="cal.display.value+='+'">
<br /><br />
</form>
</div>
</body>
</html>
calculator1.css
y{
background:skyblue;
margin:0;
}
*{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
.wrap{
width:360px;
margin:auto;
height:auto;
background:blue;
padding:10px;
}
input[type=text]{
width:100%;
padding:15px;
color:#000;
font-size:25px;
font-weight:bold;
position:relative;
margin-top:10px;
border-radius:5px;
}
input[type=button]{
width:82px;
padding:10px;
font-size:35px;
font-weight:bolder;
border-radius:5px;
}
OUTPUT:
إرسال تعليق