You can make a simple calculator using just core web technologies: HTML and CSS. This calculator can perform basic mathematical operations like addition, subtraction, multiplication, and division.Features of the Calculator. In this project, you are going to develop a calculator that will have the following features: It will perform basic arithmetic operations like addition, subtraction, division, and multiplication. It will perform decimal operations. The calculator will display Infinity if you try to divide any number by zero. It will not display any result in case of invalid expression. For example, 5++9 will not display anything. Clear screen feature to clear the display screen anytime you want. Components of the Calculator The calculator consists of the following components: Mathematical Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/). Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . . Display Screen: It displays the mathematical expression and the result. Clear Screen Button: It clears all mathematical values. Calculate button (=): It evaluates the mathematical expression and returns the result.
In this project, you are going to develop a calculator that will have the following features:
It will perform basic arithmetic operations like addition, subtraction, division, and multiplication.
It will perform decimal operations.
The calculator will display Infinity if you try to divide any number by zero.
It will not display any result in case of invalid expression. For example, 5++9 will not display anything.
Clear screen feature to clear the display screen anytime you want. Components of the Calculator
The calculator consists of the following components:
Mathematical Operators: Addition (+), Subtraction (-), Multiplication (*), and Division (/).
Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .
Display Screen: It displays the mathematical expression and the result.
Clear Screen Button: It clears all mathematical values.
Calculate button (=): It evaluates the mathematical expression and returns the result.
Copy the following codes which will help you create the website And edit on your own :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, intial-scale=1">
<link rel="icon" href="https://lh3.googleusercontent.com/70NhuagHZT4xsEyuzwbJ4nsN4gq0E5w7WQ3OlJ3yJulIsqlIW-gUsowSxwRimI3kLMCDlvWC161nWY341OYw6MbGFp3aXb6uIfnrhufANrupgt-cqMwbg70yMo1IMH9SEKzfXcq4rIrmpWVDUhq-60dWEf9ZRPQYNL6TgfKVXGV23abblpFQW6NRrV1GwuSsrEFzrzjdRLDErraKDylWBQW-zTiLsfG8SkfO2K55VSueAIdJzyiiFep0djbGhPkaAy339FdBodmF7qDDjQSRQUaI8ma3Oa81xH9VQTDRiss_KAePRytHkwA_ateYM_6Bko9JbStpSBDAvt-8FMoekIm0X3IX433Lj6svwdd0OWCOWzve9tk6-ST5Q7C9bs3o9bxQ801WNYAe-o-Dm8sWN4jYyT4V40owk0UJ7noP1BoLMb5TinBxBeEqGohyMRL25f3w4YCjiVWZrceDlDulMRhb8D6dFd4PTyIFT4aiLnoqBVO2ye3cdUT4G4ZBNFOgy2cLFmKgJRboAH_pYUN69JXN2O5LEluudkF_lcYzLi5Lkn-cZk5By9t3_vc0ygwq-TG1WUudtGj3AgIO8UKDlSINu2xJswDhwUs-_854B_mQefEj51V_u8Na0Tcw3r5V3g-XAtT1RD_HB3xg_QH3bmRDYOai4OAxJh0pXzkTNyu_kOAtXzap-X4ayfd47XzhjuAYjix4vJcGx16ZMOdfQ667=w358-h357-no?authuser=0">
<title>D Calculator</title>
<style>
h4 {
font-family : Cooper Black;
color: green;
margin-left: 35px;
}
h4:hover {
color: darkgreen;
}
#text {
border-radius: 5px;
width: 300px;
height: 20px;
}
#eq1 {
background-color: blue;
border-color: white;
border-width: 1px;
width: 40px;
height : 30px;
}
#eq1:hover {
background-color: darkblue;
border-color: white;
border-width: 1px;
color: white;
}
#bce {
background-color: gray;
border-color : white;
border-width: 1px;
width: 40px;
height : 30px;
}
#bce:hover {
background-color: red;
border-color: white;
border-width: 1px;
color: white;
}
#b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9, #b0 {
background-color: yellow;
border-color : white;
border-width: 1px;
width: 40px;
height : 30px;
}
#bplus, #bminos, #bmulti, #bdivi, #bper, #bdot, #bb1, #bb2 {
background-color: orange;
border-color: white;
border-width: 1px;
width: 40px;
height : 30px;
}
</style>
</head>
<body>
<form name="calculator">
<h4>Calculator By Dibyanshu</h4>
<input id="text" type="textfield" name="ans" value=""><br><br>
<div>
   <input id="bce" type="reset" value="CE">
<input id="bplus" type="button" value="+ " onClick="document.calculator.ans.value+='+'">
<input id="bminos" type="button" value="- " onClick="document.calculator.ans.value+='-'">
<input id="eq1" type="button" value="= " onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"><br>
   <input id="b1" type="button" value="1 " onClick="document.calculator.ans.value+='1'">
<input id="b2" type="button" value="2 " onClick="document.calculator.ans.value+='2'">
<input id="b3" type="button" value="3 " onClick="document.calculator.ans.value+='3'">
<input id="bmulti" type="button" value="* " onClick="document.calculator.ans.value+='*'"><br>
   <input id="b4" type="button" value="4 " onClick="document.calculator.ans.value+='4'">
<input id="b5" type="button" value="5 " onClick="document.calculator.ans.value+='5'">
<input id="b6" type="button" value="6 " onClick="document.calculator.ans.value+='6'">
<input id="bdivi" type="button" value="/ " onClick="document.calculator.ans.value+='/'"><br>
   <input id="b7" type="button" value="7 " onClick="document.calculator.ans.value+='7'">
<input id="b8" type="button" value="8 " onClick="document.calculator.ans.value+='8'">
<input id="b9" type="button" value="9 " onClick="document.calculator.ans.value+='9'">
<input id="bper" type="button" value="% " onClick="document.calculator.ans.value+='%'"><br>
   <input id="b0" type="button" value="0 " onClick="document.calculator.ans.value+='0'">
<input id="bdot" type="button" value=". " onClick="document.calculator.ans.value+='.'">
<input id="bb1" type="button" value="( " onClick="document.calculator.ans.value+='('">
<input id="bb2" type="button" value=" ) " onClick="document.calculator.ans.value+=')'">
</form>
</body>
</html>
Comments