Anto Mervin
Calculator With JS

Calculator With JS

A Beginner-Friendly Guide to Building a JavaScript Calculator

Anto Mervin's photo
Anto Mervin
·

4 min read

In the era of web development, JavaScript plays a pivotal role in enhancing user experience. Among its numerous applications, building a calculator stands out as a fundamental yet essential task. A JavaScript calculator not only showcases the power and versatility of the language but also serves as a practical tool for users. In this article, we'll delve into the process of creating a simple yet functional calculator using JavaScript.

Setting Up HTML Structure

To kickstart our JavaScript calculator project, the first step involves setting up the HTML structure. This entails creating an HTML file and incorporating a JavaScript file for interactivity. By establishing the groundwork in this manner, we pave the way for seamless integration of JavaScript functionalities into our calculator.

  <body>
    <div class="wrapper">
      <div class="calculator">
        <div class="display">
          <input type="text" id="display" disabled />
          <div class="operator-icon">
            <div id="select-operator"></div>
          </div>
        </div>
        <div class="buttons">
          <button onclick="appendNumber(7)">7</button>
          <button onclick="appendNumber(8)">8</button>
          <button onclick="appendNumber(9)">9</button>
          <button class="Operator" onclick="appendOperator('/')">/</button>
          <button onclick="appendNumber(4)">4</button>
          <button onclick="appendNumber(5)">5</button>
          <button onclick="appendNumber(6)">6</button>
          <button class="Operator" onclick="appendOperator('+')">+</button>
          <button onclick="appendNumber(1)">1</button>
          <button onclick="appendNumber(2)">2</button>
          <button onclick="appendNumber(3)">3</button>
          <button class="Operator" onclick="appendOperator('-')">-</button>
          <button onclick="clearDisplay()">C</button>
          <button onclick="appendNumber(0)">0</button>
          <button class="Operator" onclick="appendOperator('*')">*</button>
          <button class="equal" onclick="calculate()">=</button>
        </div>
      </div>
    </div>
  </body>

Designing Calculator Interface

A visually appealing interface is crucial for user engagement. In this section, we focus on designing the layout of our calculator using HTML elements and CSS styling. By carefully crafting the interface, we aim to enhance usability and aesthetics, thereby optimizing the overall user experience.

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.display {
    position: relative;
}

.display>.operator-icon {
    color: #fff;
    display: flex;
    position: absolute;
    top: 20%;
    left: 8px;

}

#select-operator {
    font-size: 30px;
}

input[type="text"] {

    padding: 20px;
    font-size: 30px;
    text-align: right;
    border: none;
    border-radius: 5px;
    color: #fff;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 10px;
    margin-top: 20px;
}

button {
    padding: 20px;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    background-color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #b7b7b7;
}

.Operator {
    background-color: #f97e20;
}

.equal {
    background-color: #000000;
    color: #fff;
    border: 2px solid #fff;

}

Implementing Basic Calculation Functions

The heart of any calculator lies in its ability to perform basic arithmetic operations. Through JavaScript, we can effortlessly implement functions for addition, subtraction, multiplication, and division. These essential functions form the backbone of our calculator, enabling users to carry out mathematical computations with ease.

let display = document.getElementById("display");
  let currentNumber = "";
  let firstNumber = "";
  let operator = "";
  let result = "";

  function appendNumber(number) {
    currentNumber += number;
    display.value = currentNumber;
  }

  function appendOperator(op) {
    firstNumber = currentNumber;
    currentNumber = "";
    operator = op;
    document.getElementById("select-operator").innerHTML = op;
  }

  function calculate() {
    if (operator === "+") {
      result = parseInt(firstNumber) + parseInt(currentNumber);
      document.getElementById("select-operator").innerHTML = "";
    } else if (operator === "-") {
      result = parseInt(firstNumber) - parseInt(currentNumber);
      document.getElementById("select-operator").innerHTML = "";
    } else if (operator === "*") {
      result = parseInt(firstNumber) * parseInt(currentNumber);
      document.getElementById("select-operator").innerHTML = "";
    } else if (operator === "/") {
      result = parseInt(firstNumber) / parseInt(currentNumber);
      document.getElementById("select-operator").innerHTML = "";
    }
    display.value = result;
    currentNumber = result;
  }

  function clearDisplay() {
    display.value = "";
    currentNumber = "";
    firstNumber = "";
    operator = "";
    result = "";
    document.getElementById("select-operator").innerHTML = "";
  }

Output:

Click Here, To View In CodePen

Conclusion

In conclusion, building a JavaScript calculator is not only a testament to our programming prowess but also a gateway to enhancing user experience on the web. By following the steps outlined in this article, we've embarked on a journey of creativity and innovation. As you delve deeper into the era of JavaScript development, don't hesitate to experiment further and push the boundaries of what's possible.

FAQs

  1. Can I customize the design of the calculator interface? Absolutely! Feel free to experiment with CSS styling to tailor the interface according to your preferences.

  2. Are there any limitations to the calculations supported by this JavaScript calculator? While our calculator covers basic arithmetic operations, more complex calculations may require additional functionalities.

  3. Can I integrate this calculator into my website? Yes, you can easily integrate the JavaScript calculator into your website by embedding the corresponding HTML and JavaScript code.

  4. Is prior knowledge of JavaScript required to build this calculator? While a basic understanding of JavaScript is beneficial, beginners can follow along with the step-by-step instructions provided in this article.

  5. Are there any resources for further learning about JavaScript development? Indeed! There are numerous online tutorials, courses, and documentation available to aid in your journey of mastering JavaScript development.

HTML5CSSJavaScript