Calculator using HTML, CSS, and JavaScript
In web development, there is a lot of focus put on developing applications that are engaging and easy to use. A perfect example of an effective application is a calculator. This tutorial focuses on creating a simple calculator using HTML, CSS, and JavaScript.
HTML Structure
Now let’s create the HTML structure for our calculator. Create a new HTML file and copy the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator using HTML, CSS and JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('*')">*</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('-')">-</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('+')">+</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="calculate()">=</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Here, we created the basic HTML structure that contains a text input for the display and buttons for numbers, operators, and special actions.
CSS Styling
Next, let’s style our calculator using CSS. Create a new file title “styles.css” and copy the code below:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
}
.calculator {
border: 1px solid #ccc;
border-radius: 5px;
width: 300px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#display {
width: 100%;
margin-bottom: 10px;
padding: 5px;
font-size: 18px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
background-color: #fff;
}
button:active {
background-color: #f0f0f0;
}
The CSS above adds a modern yet simple style to our calculator interface. As a result it will not only look good, but will also be easy to navigate.
JavaScript Functionality
Finally we can now implement the JavaScript that will make our calculator work. Create a new file called “script.js” and copy this code:
let display = document.getElementById('display');
let currentInput = '';
function appendValue(value) {
currentInput += value;
display.value = currentInput;
}
function clearDisplay() {
currentInput = '';
display.value = '';
}
function calculate() {
try {
currentInput = eval(currentInput).toString();
display.value = currentInput;
} catch (error) {
display.value = 'Error';
}
}
The JavaScript code above contains three functions: appendValue, clearDisplay, and calculate. These functions are used to append values to the display, clearing the display, and performing the calculate action.
Now, with the following HTML, CSS and JavaScript files, a user friendly simple calculator can be found in a web browser. If you open the HTML file in a browser, you should see the calculator with primary functionality.
Live Demo
Technologies Used
- HTML / CSS / JavaScript
About the code
Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari
Responsive:- Yes
Dependencies: – N/A
Conclusion
As a final point, we have built a very basic and efficient calculator using HTML, CSS, and JavaScript. No matter what the input is, the structure, style and functionality of all the three technologies is the same. The project serves as an introduction to web development, and serves as a stepping stone for learning how to build more complex applications in the future.
Do not forget that this is only the beginning of the journey. The possibilities of improving this calculator are limitless as you familiarize yourself with web development. Features such as scientific functions can be added and the overall style can be improved to be more sleek. This simple calculator serves as an introductory point to understanding the world of web development.
Feel free to modify and enhance this code further by adding more functionalities or designs.
Happy coding!
