Creating interactive applications is both challenging and rewarding. One classic example is a calculator app, which not only serves as a practical tool but also offers a great opportunity to learn fundamental JavaScript concepts.
In this article, we'll embark on a journey to build a simple calculator application using JavaScript.
For simplicity, I'll create a calculator with basic arithmetic operations (addition, subtraction, multiplication, division).
Understanding the Basic:
Before diving into the code, let's outline the basic functionalities our calculator app should have:
Display: A display area to show the input and output of calculations.
Buttons: Buttons representing numbers, arithmetic operators, and other controls like "Clear" and "Equals".
Arithmetic Operations: Support for basic arithmetic operations like addition, subtraction, multiplication, and division.
Setting Up the HTML Structure
We'll start by creating the structure of our calculator using HTML.
Here's a basic template to get us started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build Calculator App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="keys">
<button onclick="appendNumber('7')">7</button>
<button onclick="appendNumber('8')">8</button>
<button onclick="appendNumber('9')">9</button>
<button class="minus" onclick="appendOperator('+')">+</button>
<button onclick="appendNumber('4')">4</button>
<button onclick="appendNumber('5')">5</button>
<button onclick="appendNumber('6')">6</button>
<button class="minus" onclick="appendOperator('-')">-</button>
<button onclick="appendNumber('1')">1</button>
<button onclick="appendNumber('2')">2</button>
<button onclick="appendNumber('3')">3</button>
<button class="minus" onclick="appendOperator('*')">*</button>
<button onclick="appendNumber('0')">0</button>
<button class="minus" onclick="clearResult()">C</button>
<button class="minus" onclick="calculateResult()">=</button>
<button class="minus" onclick="appendOperator('/')">/</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling the Calculator
While styling isn't the primary focus of this tutorial, we'll add some basic CSS to make our calculator visually appealing and user-friendly.
Feel free to customize the styles according to your preference.
CSS Structure:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #c2b2d8;
}
.calculator {
background-color: #090012;
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}
#result {
width: calc(100% - 20px);
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
border-radius: 10px;
border: none;
outline: none;
}
.keys {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
button {
padding: 10px;
font-size: 18px;
background-color: #ffffff;
color: #000000;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: 600;
outline: none;
}
button:hover {
background-color: #e9d8f7;
}
.minus{
background-color: rgb(245, 113, 197);
font-weight: 500;
color: white;
}
.minus:hover{
background-color: rgb(243, 81, 184);
}
Implementing JavaScript Functionality:
Now, let's add the JavaScript logic to make our calculator functional. We'll define functions to handle number input, arithmetic operations, and calculation.
let result = document.getElementById('result');
function appendNumber(num) {
result.value += num;
}
function appendOperator(operator) {
result.value += operator;
}
function clearResult() {
result.value = '';
}
function calculateResult() {
try {
result.value = eval(result.value);
} catch (error) {
result.value = 'Error';
}
}
Wrapping Up
Congratulations! You've built a basic calculator app using JavaScript. While this example covers only the essentials, there's a lot more you can do to enhance its functionality and appearance.
Consider adding support for decimal numbers, handling keyboard input, or implementing more advanced operations.
If you want Download the Projects Source code Then Please Join Use our Telegram Channel Click on Below Button ⤵👇
Top comments (0)