calculator

JavaScript Project: Learn How to Build a Calculator From Scratch Using JavaScript

In this tutorial, i will teach you how to build a simple calculator using JavaScript.
This tutorial assume that you’re not a novice in HTML and CSS, so i won’t explain the HTML and CSS codes in details. If you wish you to learn HTML, CSS and Bootstrap

CLICK HERE TO LEARN HTML, CSS & BOOTSTRAP FROM SCRATCH

Feel free to ask to drop your questions in the comment section below or contact me if you have any projects you want to execute.

We’ll need two files for this simple project: HTML and CSS file. Our JavaScript will be In-line JavaScript.

<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simple JavaScript mainCalculator</title>
<script src="text/javascript"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1><strong> Simple JavaScript Calculator</strong></h1>
    <section id="calculatorWrapper">
        <form id="mainCalculator">
            <input type="text" name="answer">
            <br>
            <input type="button" value=" 1 " onclick="mainCalculator.answer.value += '1'">
            <input type="button" value=" 2 " onclick="mainCalculator.answer.value += '2'">
            <input type="button" value=" 3 " onclick="mainCalculator.answer.value += '3'">
            <input type="button" value=" + " onclick="mainCalculator.answer.value += '+'">
                <br>
            <input type="button" value=" 4 " onclick="mainCalculator.answer.value += '4'">
            <input type="button" value=" 5 " onclick="mainCalculator.answer.value += '5'">
            <input type="button" value=" 6 " onclick="mainCalculator.answer.value += '6'">
            <input type="button" value=" x " onclick="mainCalculator.answer.value += '*'">
                <br>
            <input type="button" value=" 7 " onclick="mainCalculator.answer.value += '7'">
            <input type="button" value=" 8 " onclick="mainCalculator.answer.value += '8'">
            <input type="button" value=" 9 " onclick="mainCalculator.answer.value += '9'">
            <input type="button" value=" - " onclick="mainCalculator.answer.value += '-'">
                <br>
            <input type="button" value=" c " onclick="mainCalculator.answer.value = ''">
            <input type="button" value=" 0 " onclick="mainCalculator.answer.value += 0">
            <input type="button" value=" = " onclick="mainCalculator.answer.value = eval(mainCalculator.answer.value)">
            <input type="button" value=" / " onclick="mainCalculator.answer.value += '/'">
                <br>
            <input type="button" value="." onclick="mainCalculator.answer.value += '.'">
        </form>
    </section>
</body>
</html>

In the HTML code above, the JavaScript onclick event performs the calculator when a button input is called. It performs to operation using the form id, text input name and the value. for 0 to 9 inputs, it adds the value to the form text input area. For the 0 input field, the value in the onclick event isn’t enclosed in a quote ‘ ‘.

For equal to operator, we use the evaluation function eval() to evaluate the form id, text input name and the value and also you don’t include the plus sign (+) because you’re not adding it to the text input area. For clear (c), we keep and empty space between the quotes ‘ ‘ which tells the device to empty the input field when the button is clicked.

#calculatorWrapper {
    width: 600px;
    height: auto;
    background: #000;
    border: 3px solid rgb(255, 0, 0);
    border-radius: 15px;
    margin: 0 auto;
  }

  input[type=button] {
      width: 20%;
      margin: 2%;
      font-size: 20px;
      font-weight: 600px;
      line-height: 1.5;
      color: #fff;
      background: #553945;
      border: 1px solid yellow;
  }

  input[type=button]:hover {
      color: #ff0000;
  }

  input[type=text] {
      width: 90%;
      font-size: 20px;
      margin: 1% 1% 1% 4%;
      color: #ff0000;
      background:#fff;
      font-weight: bold;
      border: 2px solid yellow;
  }

  input[type=text]:hover {
      background: rgb(241, 216, 216);
      border: 3px double blue;
  }

  h1 {
      text-align: center;
  }

YOU SHOULD GET THIS

THAT’S IT! YOU’VE CREATED A SIMPLE CALCULATOR WITH THE HELP OF JAVASCRIPT ONCLICK EVENT. WHAT OUT FOR MY COMPLETE SCIENTIFIC CALCULATOR TUTORIAL

Leave a Reply

Your email address will not be published. Required fields are marked *

94 − 91 =