Building a Calculator App with JavaScript: A Beginner's Guide
Tags: calculatorapp, javascript, programming, tutorial
Published: 2024-02-15 04:04:12

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:

```html
<!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:

```css
@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.

```javascript
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 ⤵👇
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6o1bjc4v4ktjobn24xw.png)](https://t.me/codervicky)