HTML CODING FOR CALCULATOR
CODING FOR CALCULATOR
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
input {
padding: 10px;
margin: 10px;
border-radius: 5px;
border: none;
font-size: 20px;
text-align: center;
}
input[type="button"] {
background-color: #00ccff;
color: #fff;
cursor: pointer;
}
input[type="button"]:hover {
background-color: #00b3e6;
}
</style>
</head>
<body>
<h1>Calculator</h1>
<form name="calculator">
<input type="text" name="result" id="result" value="" disabled>
<input type="button" value="1" onclick="calculator.result.value += '1'">
<input type="button" value="2" onclick="calculator.result.value += '2'">
<input type="button" value="3" onclick="calculator.result.value += '3'">
<input type="button" value="+" onclick="calculator.result.value += '+'">
<input type="button" value="4" onclick="calculator.result.value += '4'">
<input type="button" value="5" onclick="calculator.result.value += '5'">
<input type="button" value="6" onclick="calculator.result.value += '6'">
<input type="button" value="-" onclick="calculator.result.value += '-'">
<input type="button" value="7" onclick="calculator.result.value += '7'">
<input type="button" value="8" onclick="calculator.result.value += '8'">
<input type="button" value="9" onclick="calculator.result.value += '9'">
<input type="button" value="*" onclick="calculator.result.value += '*'">
<input type="button" value="C" onclick="calculator.result.value = ''">
<input type="button" value="0" onclick="calculator.result.value += '0'">
<input type="button" value="/" onclick="calculator.result.value += '/'">
<input type="button" value="=" onclick="calculator.result.value = eval(calculator.result.value)">
</form>
</body>
</html>
This calculator has basic functionality, including addition, subtraction, multiplication, division, and the ability to clear the calculator's display. The result is displayed in a disabled text input field, and the user can input numbers and operators by clicking the appropriate buttons. The eval() the function is used to evaluate the mathematical expression entered by the user, and the result is displayed in the same text input field.
Comments
Post a Comment