Scribd
Upload
0 views6 pages

How to Create a Calculator Using HTML CSS and JavaScript

The document provides a guide on creating a simple calculator using HTML, CSS, and JavaScript. It outlines the structure, styling, and functionality required for the calculator, including code examples for each component. The calculator performs basic mathematical operations and includes features like button clicks, error handling, and responsive design.

Uploaded by

mamahrt1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views6 pages

How to Create a Calculator Using HTML CSS and JavaScript

The document provides a guide on creating a simple calculator using HTML, CSS, and JavaScript. It outlines the structure, styling, and functionality required for the calculator, including code examples for each component. The calculator performs basic mathematical operations and includes features like button clicks, error handling, and responsive design.

Uploaded by

mamahrt1
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

How to create a Calculator using HTML CSS

and JavaScript
Making a calculator is an easy yet effective way to learn HTML, CSS, and JavaScript web
programming. It integrates the implementation of logic, interaction, and user interface design.

What is a calculator?
A calculator is a tool used to do mathematical operations on numbers. Simple calculators are
limited to performing mathematical operations like addition, subtraction, multiplication, and
division.
The purpose of calculators is to compute mathematical problems rapidly. More sophisticated
calculators, such as scientific calculators, can carry out more intricate operations, whereas basic
calculators are only made to handle addition, subtraction, multiplication, and division.

CODES
HTML (Structure):
Defines the layout of the calculator.
Includes:
 A display area for showing numbers and results.
 Buttons for numbers (0-9), operators (+, -, *, /), clear (C), and equals (=).

CSS (Styling):
Enhances the appearance of the calculator.
Implements:
 Styling for buttons, display area, and overall layout.
 Hover and active states for interactive feedback.
 Responsive design for adaptability on different devices.

JavaScript (Functionality):
Adds interactivity and logic to the calculator.
Handles:
 Button clicks to capture user input.
 Arithmetic operations and evaluation of expressions.
 Clear and reset functionality.
 Error handling for invalid inputs.
STEPS
 Created the design with the HTML Table where first is holding the input field
with id=”result” and the rest are filled with input button.
 With every click of the button, it displays the respective value of the button to the input
field by using the function dis().
 myFunction() is used to set the value pressed from the keyboard to the same input field.

Example on how to use HTML, CSS, and JavaScript to create a calculator webpage
HTML: Structure

<!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">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="btn" data-value="7">7</button>
<button class="btn" data-value="8">8</button>
<button class="btn" data-value="9">9</button>
<button class="btn operator" data-value="/">÷</button>
<button class="btn" data-value="4">4</button>
<button class="btn" data-value="5">5</button>
<button class="btn" data-value="6">6</button>
<button class="btn operator" data-value="*">×</button>
<button class="btn" data-value="1">1</button>
<button class="btn" data-value="2">2</button>
<button class="btn" data-value="3">3</button>
<button class="btn operator" data-value="-">−</button>
<button class="btn" data-value="0">0</button>
<button class="btn" data-value=".">.</button>
<button class="btn" id="clear">C</button>
<button class="btn operator" data-value="+">+</button>
<button class="btn" id="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS: Styling
/* styles.css */
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f9;
}

.calculator {
width: 300px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}

#display {
width: 100%;
height: 50px;
margin-bottom: 10px;
padding: 10px;
font-size: 1.5rem;
text-align: right;
border: 1px solid #ddd;
border-radius: 5px;
background-color: #f9f9f9;
outline: none;
color: #333;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

.btn {
height: 50px;
font-size: 1.2rem;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
transition: background 0.3s;
}

.btn:hover {
background-color: #0056b3;
}

.operator {
background-color: #f4a261;
}

.operator:hover {
background-color: #e07a5f;
}

#clear {
background-color: #e63946;
}

#clear:hover {
background-color: #d62828;
}

#equals {
background-color: #2a9d8f;
grid-column: span 2;
}
#equals:hover {
background-color: #21867a;
}

JavaScript: Calculator Functionality


// script.js
document.addEventListener('DOMContentLoaded', () => {
const display = document.getElementById('display');
const buttons = document.querySelectorAll('.btn');
const clearButton = document.getElementById('clear');
const equalsButton = document.getElementById('equals');

let currentInput = '';


let result = '';

// Update the display


const updateDisplay = () => {
display.value = currentInput || result || '0';
};

// Handle button clicks


buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.getAttribute('data-value');

if (!value) return;

// If it's a number or a decimal point, append it to the input


if (/\d|\./.test(value)) {
currentInput += value;
}
// If it's an operator, handle it
else {
if (currentInput && /[\+\-\*\/]$/.test(currentInput) === false) {
currentInput += value;
}
}

updateDisplay();
});
});
// Handle the clear button
clearButton.addEventListener('click', () => {
currentInput = '';
result = '';
updateDisplay();
});

// Handle the equals button


equalsButton.addEventListener('click', () => {
try {
result = eval(currentInput); // Use eval to evaluate the expression
currentInput = '';
} catch (error) {
result = 'Error';
}

updateDisplay();
});

// Initialize display
updateDisplay();
});

You might also like