Certainly!
Below is a complete guide to creating a user-friendly and
functional web-based calculator that can perform basic arithmetic operations
such as addition, subtraction, multiplication, and division. This calculator
utilizes HTML for structure, CSS for styling, and JavaScript for functionality,
providing an interactive experience for users.
### HTML (index.html)
This code snippet sets up the basic structure of the calculator, including
input fields for the numbers and buttons for each operation.
```html
<!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>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”calculator”>
<h1>Simple Calculator</h1>
<input type=”number” id=”num1” placeholder=”Enter first
number” />
<input type=”number” id=”num2” placeholder=”Enter second
number” />
<div class=”buttons”>
<button onclick=”calculate(‘add’)”>Addition</button>
<button onclick=”calculate(‘subtract’)”>Subtraction</button>
<button onclick=”calculate(‘multiply’)”>Multiplication</button>
<button onclick=”calculate(‘divide’)”>Division</button>
</div>
<h2 id=”result”>Result: </h2>
</div>
<script src=”script.js”></script>
</body>
</html>
```
### CSS (styles.css)
This stylesheet enhances the appearance of the calculator, making it visually
appealing and easy to use by centering the content, styling the buttons, and
providing a clean background.
```css
Body {
Font-family: Arial, sans-serif;
Display: flex;
Justify-content: center;
Align-items: center;
Height: 100vh;
Background-color: #f4f4f4;
.calculator {
Background: white;
Padding: 20px;
Border-radius: 10px;
Box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
H1 {
Text-align: center;
Input {
Width: 100%;
Padding: 10px;
Margin: 10px 0;
Border: 1px solid #ccc;
Border-radius: 5px;
.buttons {
Display: flex;
Justify-content: space-between;
Button {
Flex: 1;
Margin: 5px;
Padding: 10px;
Border: none;
Border-radius: 5px;
Background-color: #007bff;
Color: white;
Cursor: pointer;
Button:hover {
Background-color: #0056b3;
H2 {
Text-align: center;
```
### JavaScript (script.js)
The JavaScript logic handles the arithmetic operations. It retrieves the values
from the input fields and performs the selected operation, updating the
result dynamically on the page.
```javascript
Function calculate(operation) {
Const num1 = parseFloat(document.getElementById(‘num1’).value);
Const num2 = parseFloat(document.getElementById(‘num2’).value);
Let result;
Switch (operation) {
Case ‘add’:
Result = num1 + num2;
Break;
Case ‘subtract’:
Result = num1 – num2;
Break;
Case ‘multiply’:
Result = num1 * num2;
Break;
Case ‘divide’:
If (num2 !== 0) {
Result = num1 / num2;
} else {
Result = ‘Error: Division by zero’;
Break;
Default:
Result = ‘Invalid operation’;
Document.getElementById(‘result’).innerText = ‘Result: ‘ + result;
```
### How to Run the Application
To run the calculator application:
1. Create three files named `index.html`, `styles.css`, and `script.js` on your
computer.
2. Copy and paste the respective code snippets into each file.
3. Open the `index.html` file in any web browser of your choice.
Once opened, you will be greeted by a straightforward calculator interface.
You can enter two numbers, choose any of the basic arithmetic operations by
clicking the corresponding buttons, and see the result displayed immediately
below. This simple tool allows for quick calculations and serves as a great
introductory project for those learning web development!
This message has been generated by Nova – download it for free:
