Build a Simple Calculator Using HTML, CSS, and JavaScript

Build a Simple Calculator Using HTML, CSS, and JavaScript

Straightforward, determined code is the best approach while programming. Look at how to construct your own number cruncher in HTML, CSS, and JS.


The most ideal way to learn JavaScript is to fabricate projects. If you have any desire to turn into a decent web engineer, you really want to begin making projects straightaway. You can begin by building fledgling undertakings like a basic number cruncher, computerized clock, or stopwatch.

You can make a straightforward mini-computer utilizing simply center web innovations: HTML, CSS, and JavaScript. This number cruncher can perform essential numerical activities like expansion, deduction, augmentation, and division.

Elements of the Calculator

  1. In this undertaking, you will foster a number cruncher that will have the accompanying highlights:
  2. It will perform fundamental number-crunching tasks like expansion, deduction, division, and duplication.
  3. It will perform decimal tasks.
  4. The mini-computer will show Infinity assuming that you attempt to isolate any number by nothing.
  5. It won't show any outcome in the event of invalid articulation. For instance, 5++9 won't show anything.
  6. Clear screen element to clear the showcase screen whenever you need.

The Main Components of Calculator

Numerical Operators: Addition (+), Subtraction (- ), Multiplication (*), and Division (/).

Digits and Decimal Button: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

Show Screen: It shows the numerical articulation and the outcome.

Clear Screen Button: It clears generally numerical qualities.

Work out button (=): It assesses the numerical articulation and returns the outcome.

--- Source Codes - - -

To make this Project , you need to create 3 files: 1. HTML document, 2. CSS and 3. JavaScript file. Subsequent to making these documents, simply glue the accompanying codes into your record.

    1. HTML

                  First, create an HTML file named index.html and paste the given code into your HTML file. Remember that you must create a file with a .html extension.
    <!DOCTYPE html>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <meta name="" content="">
      <link rel="stylesheet" href="style.css" type="text/css" media="all" />
      <div class="container">
        <div class="Calculator">
          <input type="text" placeholder="0" id="output" />
          <button onclick="clr()">AC</button>
          <button onclick="dlt()">DEL</button>
          <button onclick="display('%')">%</button>
          <button onclick="display('/')">/</button>
          <button onclick="display('7')">7</button>
          <button onclick="display('8')">8</button>
          <button onclick="display('9')">9</button>
          <button onclick="display('*')">*</button>
          <button onclick="display('4')">4</button>
          <button onclick="display('5')">5</button>
          <button onclick="display('6')">6</button>
          <button onclick="display('+')">+</button>
          <button onclick="display('1')">1</button>
          <button onclick="display('2')">2</button>
          <button onclick="display('3')">3</button>
          <button onclick="display('-')">-</button>
          <button onclick="display('.')">.</button>
          <button onclick="display('0')">0</button>
          <button onclick="calculate()" class="value">=</button>
    <script src="main.js" type="text/javascript" charset="utf-8"></script>

    2. CSS

                  Second, create a CSS file named style.css and paste the given symbols into your CSS file. Remember that you must create a file with a .css extension.

        * {
      margin: 0;
      padding: 0;
      box-sizing: `border-box;
      background-color: #fbe9e9;
      font-family: Sans-Serif;
      outline: none;
    .container {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    .Calculator {
      background-color: #eeccff00;
      padding: 15px;
      border-radius: 30px;
      box-shadow: inset 5px 5px 14px #ffffff,
      5px 5px 12px rgba(0,0,0,.16);
      display: grid;
      grid-template-columns: repeat(4,68px);
    input {
      grid-column: span 4;
      height: 70px;
      width: 250px;
      background-color: #eeccff00;
      box-shadow: inset -5px -5px 12px #ffffff,
                  inset 5px 5px 12px rgba(0,0,0,.16);
      border: none;
      border-radius: 30px;
      font-size: 50px;
      color: rgb(0,0,0);
      text-align: end;
      margin: auto;
      margin-top: 40px;
      margin-bottom: 30px;
      padding: 10px;
    button {
      height: 48px;
      width: 48px;
      background-color: #eeccff00;
      box-shadow: -5px -5px 12px #ffffff,
                  5px 5px 12px rgba(0,0,0,.16);
      border: none;
      border-radius: 50%;
      margin: 8px;
      font-size: 16px;
    .value {
      width: 115px;
      border-radius: 40px;

    3. JavaScript

                     Third, create a JavaScript file named main.js and paste the given symbols into your JavaScript file. Remember that you must create a file with a .js extension.

      let output = document.getElementById("output");
      function display(num) {
        output.value += num;
      function calculate() {
        try {
          output.value = eval(output.value);
        catch(err) {
      function clr() {
        output.value = "";
      function dlt() {
        output.value = output.value.slice(0, -1);

    If your code does not work or you encounter any error/problem, please download the source code files from the given download button. It is free and the .zip file will be downloaded and then you have to extract it. If you face any problem while downloading or after downloading the source code files, feel free to comment or contact us through the contact page.

    Thanks for reading: Build a Simple Calculator Using HTML, CSS, and JavaScript,I hope you enjoy it follow for more...:)

    Getting Info...

    Post a Comment

    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
    AdBlock Detected!
    We have detected that you are using adblocking plugin in your browser.
    The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
    Site is Blocked
    Sorry! This site is not available in your country.