Basic Calculator using HTML, CSS, and JavaScript
This article will guide you through building a simple calculator using HTML, CSS, and JavaScript. This project is a great way to learn the fundamentals of web development, including how to structure content with HTML, style it with CSS, and add interactivity with JavaScript.
HTML Structure (index.html)
Basic Calculator
- Structure: The HTML creates a
calculator
div containing thedisplay
area and abuttons
div for the calculator's interface. - Buttons: Each button is defined within the
buttons
div. - onclick: The
onclick
attribute triggers JavaScript functions for each button.
CSS Styling (style.css)
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f0f0f0;
}
.calculator {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.display {
background-color: #eee;
padding: 10px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.button {
background-color: #eee;
border: none;
padding: 15px;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
}
.number {
background-color: #ddd;
}
.operator {
background-color: #fafafa;
}
.clear {
background-color: #f08080;
}
- Styling: The CSS provides basic styling to the calculator, display, buttons, and button types.
JavaScript Functionality (script.js)
let display = document.querySelector('.display');
let previousOperator = null;
let previousOperand = null;
function appendNumber(num) {
display.textContent += num;
}
function appendOperator(operator) {
previousOperand = parseFloat(display.textContent);
previousOperator = operator;
display.textContent += operator;
}
function calculate() {
let currentOperand = parseFloat(display.textContent.split(previousOperator)[1]);
let result;
switch (previousOperator) {
case '+':
result = previousOperand + currentOperand;
break;
case '-':
result = previousOperand - currentOperand;
break;
case '*':
result = previousOperand * currentOperand;
break;
case '/':
result = previousOperand / currentOperand;
break;
}
display.textContent = result;
}
function clearDisplay() {
display.textContent = '';
}
- Variables: Variables are declared to store the display element, previous operator, and previous operand.
- Functions:
appendNumber
: Appends a number to the display.appendOperator
: Appends an operator, stores the previous operand and operator.calculate
: Performs the calculation based on the stored operator and operands.clearDisplay
: Clears the display.
Running the Calculator
- Create three files:
index.html
,style.css
, andscript.js
. - Paste the respective code into each file.
- Open
index.html
in your web browser.
Now you have a basic calculator! You can enter numbers, operators, and calculate results. You can further enhance this calculator by adding features like:
- Memory: Store previous calculations for easy recall.
- Square root, exponent, etc.: Add more mathematical operations.
- Error Handling: Handle cases like division by zero.
- Visual Improvements: Improve the calculator's appearance and user interface (UI).
This project is a starting point for learning about web development. Feel free to experiment with more complex features and UI designs.