Calculator using HTML, CSS and JavaScript
In the world of web development, creating interactive and user-friendly applications is a common task. One such application that is both simple and practical is a calculator. In this article, we’ll walk through the process of building a basic calculator using HTML, CSS, and JavaScript.
HTML Structure
First, create the HTML structure for our calculator. Create a new HTML file and add the following code:
<!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’ve created a basic HTML structure with a text input for the display and a set of buttons for numbers, operators, and special actions.
CSS Styling
Now, let’s add some CSS to style our calculator. Create a new file named “styles.css” and add the following code:
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;
}
This CSS code provides a clean and simple style for our calculator, making it visually appealing and easy to use.
JavaScript Functionality
Lastly, let’s add the JavaScript code to make our calculator functional. Create a new file named “script.js” and add the following 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';
}
}
This JavaScript code defines three functions: appendValue, clearDisplay, and calculate. These functions handle appending values to the display, clearing the display, and performing the calculation, respectively.
With these HTML, CSS, and JavaScript files, you now have a simple calculator that users can interact with in a web browser. Open the HTML file in your browser, and you should see the calculator with basic functionality.
Live Demo
Technologies Used
- HTML / CSS / JavaScript
About the code
Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari
Responsive:- Yes
Dependencies: – N/A
Conclusion
In conclusion, we’ve make a simple and effective calculator using HTML, CSS, and JavaScript. By integrating the structure, style, and functionality of these three technologies, we’ve developed a tool that effortlessly handles basic arithmetic operations. This project not only serves as a practical example for those entering the field of web development but also lays the groundwork for constructing more intricate applications down the road.
Keep in mind that this marks just the start of your journey. As you progress in web development, there are endless opportunities to refine this calculator. You can introduce features such as scientific functions, enhance the styling for a more polished appearance, or seamlessly integrate it into larger projects. Coding is a continuous process of learning and exploration, and this uncomplicated calculator is a foundational step toward mastering the intricacies of web development.
Feel free to customize and expand upon this code to add more features or enhance the design.
Happy coding!
