Calculator Using HTML, CSS & JavaScript Download Full Source Code

calculator project source code download html css javascript

Hello Geeks! If you are learning HTML, CSS, and JavaScript and want to make a project using these three technologies. So the project of the calculator as a beginner will help you a lot to strengthen its fundamentals. In this article, we have taught you how to make a simple and good-looking calculator with the help of HTML, CSS, and JavaScript. If you want to practice by downloading the full source code of this project or want to use it in any of your school or college projects, then it will help you a lot.

Project Overview

HTML, CSS, and JavaScript are basically three fundamental coding languages by which we create any web-based project. After learning them, it is very fascinating to work on a live project for better understanding. So here we will make a calculator using these languages.

Project NameSimple Calculator
LanguagesHTML, CSS & JS
LevelEasy
Download Size1.3 KB
Project ByNeeraj Yadav

Calculator Using HTML, CSS, JavaScript

Calculator: We use this machine everywhere in our daily life for our basic calculations like- addition, subtraction, multiply, division, and more. Small calculations are easily done by a normal human brine, but when it comes to big and complex calculations, we take the help of calculators. Which solves our problems very accurately and very quickly. So working on this project can be interesting for you.

Project Details

In this project we will have total 3 files which are as follows:

  1. frontpage.html
  2. style.css
  3. calculator-script.js

In frontpage.html we have kept all the HTML coding. The CSS we have used to provide styling to the page made of HTML is in the style.css file. And the 3rd file which is calculator-script.js makes a basic calculator work, in which we have placed all the JavaScript code. style.css and calculator-script.js are both external files that are linked from frontpage.html.

Source Code

frontpage.html

// This is frontpage.html file

<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <!-- The style.css file is linked.   -->

    <title>My-Calculator</title>
</head>

<body>
    <div class="container">
        <h1>My-Calculator</h1>

        <div class="calculator">
            <input type="text" name="screen" id="display">
            <table>
                <tr>
                    <td><button>(</button></td>
                    <td><button>)</button></td>
                    <td><button>C</button></td>
                    <td><button>%</button></td>
                </tr>
                <tr>
                    <td><button>7</button></td>
                    <td><button>8</button></td>
                    <td><button>9</button></td>
                    <td><button>X</button></td>
                </tr>
                <tr>
                    <td><button>4</button></td>
                    <td><button>5</button></td>
                    <td><button>6</button></td>
                    <td><button>-</button></td>
                </tr>
                <tr>
                    <td><button>1</button></td>
                    <td><button>2</button></td>
                    <td><button>3</button></td>
                    <td><button>+</button></td>
                </tr>
                <tr>
                    <td><button>0</button></td>
                    <td><button>.</button></td>
                    <td><button>/</button></td>
                    <td><button>=</button></td>
                </tr>
            </table>
        </div>
    </div>

</body>
<script src="calculator-script.js">
    // The JavaScript file for calculator calculator-script.js is linked.
</script>

</html>

style.css

// This is style.css file

h1 {
    font-size: 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: #c72500;
}

.container {
    text-align: center;
    margin-top: 23px
}

table {
    margin: auto;
}

input {
    border-radius: 15px;
    border: 3px solid #000000;
    font-size: 35px;
    height: 70px;
    width: 456px;
    padding-left: 15px;
}

button {
    border-radius: 100px;
    font-size: 30px;
    color: beige;
    background: #000000;
    width: 85px;
    height: 85px;
    margin: 10px;
}

.calculator {
    border: 4px solid #13695d;
    background-color: #008275;
    padding: 30px;
    border-radius: 10px;
    display: inline-block;
}

calculator-script.js

// This is style.css file

let screen = document.getElementById('display');
buttons = document.querySelectorAll('button');
let screenValue = '';
for (item of buttons) {
    item.addEventListener('click', (e) => {
        buttonText = e.target.innerText;
        console.log('Button text is ', buttonText);
        if (buttonText == 'X') {
            buttonText = '*';
            screenValue += buttonText;
            screen.value = screenValue;
        } else if (buttonText == 'C') {
            screenValue = "";
            screen.value = screenValue;
        } else if (buttonText == '=') {
            screen.value = eval(screenValue);
        } else {
            screenValue += buttonText;
            screen.value = screenValue;
        }

    })
}

Download Full Source Code

Project Setup: HTML, CSS, JS Calculator

First of all, there should be an HTML code editor on your computer to edit these files. Use any of Notepad++, Atom, Brackets, VS Code, etc according to your convenience. The process described here is for Visual Studio Code.

1. Download and Install VS Code → click here to download.

2. Save the above code in three files – frontpage.html, style.css, calculator-script.js /or/ Download the Calculator project full source code using the Download button.

3. After downloading the Calculator.zip file, extract it.

4. Open VS Code editor→ File→ Open Folder

setting up calculator project

5. Select the folder “Calculator” folder found after extracting Calculator.zip. Your Calculator project will now be imported into VS Code.

6. To “Run” the project, install the “Live Server” extension. or open the frontpage.html file to “Run” the project directly.

Neeraj Yadav
Howdy Friends! I am Neeraj Yadav a professional Web and App developer. I am trying to share my knowledge through this website. Here you will get amazing coding projects, free courses, programming articles.