Generate code for a simple calculator using HTML, CSS, and vanilla JavaScript. The calculator should have buttons for digits (0-9), basic arithmetic operations (+, -, *, /), and a clear button. Display the result of the calculations in a text input or a div element. The calculator should also handle edge cases, such as division by zero. Finally, share the full code having combined all files in the html file.
Sure! Below is a simple calculator implemented using HTML, CSS, and vanilla JavaScript. The code includes buttons for digits (0-9), basic arithmetic operations (+, -, *, /), and a clear button. The result is displayed in a text input field, and it handles edge cases like division by zero.
You can copy and paste the entire code into an HTML file and open it in a web browser to see the calculator in action.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.calculator {
border: 1px solid #ccc;
border-radius: 10px;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
width: 100%;
height: 40px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 5px;
}
button {
width: 60px;
height: 60px;
font-size: 24px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
button:active {
background-color: #004494;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div>
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('-')">-</button>
</div>
<div>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('+')">+</button>
</div>
<div>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="calculateResult()">=</button>
</div>
<div>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
</div>
<div>
<button onclick="appendToDisplay('0')">0</button>
</div>
</div>
<script>
function appendToDisplay(value) {
const display = document.getElementById('display');
display.value += value;
}
function clearDisplay() {
const display = document.getElementById('display');
display.value = '';
}
function calculateResult() {
const display = document.getElementById('display');
try {
const result = eval(display.value);
if (result === Infinity || result === -Infinity) {
throw new Error("Division by zero");
}
display.value = result;
} catch (error) {
display.value = "Error";
}
}
</script>
</body>
</html>
appendToDisplay(value): Appends the clicked button's value to the display.clearDisplay(): Clears the display.calculateResult(): Evaluates the expression in the display. It uses eval() to compute the result and handles division by zero by checking for Infinity.You can enhance this calculator further by adding more features or improving the UI as needed!