Create Calculator Using HTML CSS JavaScript ( Source Code)

Create Calculator Using HTML CSS JavaScript ( Source Code)

 Hey Learners…, In this article, we are going to design a very interactive and impressive project which is an Awesome UI Responsive Calculator with detailed functionality.
Learners, You also know that we are so much tech innovative, it is also so because as a programmer whenever we find any hurdles in our work we just try to rid form it by any alternative solutions or it can be by it solving its root cause.
So, by this property, we have an example of the calculator in front of us although we can do the calculation stuff by pen and paper but do you think it will be feasible, Not at all. We have a single moto to solve the problem and make it less time-consuming that can provide an awesome service for the user.
Similarly, we are going to clone a whether app by ourselves 😉.
Hey learners..!
Welcome to our 🎊 today’s blog with code with random. In this blog, we gonna learn how we can design an Awesome UI Responsive Calculator project Using HTML CSS JAVASCRIPT.
I hope you must have got an idea about the project.
Let’s have a look at our project.

 

 

As you are looking in the project preview how the thing is organized in the single container.

Following is the feature of our project:-
  • Like as you are able to observe the attached awesome Ui design of the calculator in which we have a display combined with a few buttons that have numerical and some functional values on it.
  • Like in the second image I have selected two numbers with multiplication functionality and after doing this if you press equal to sign then the result will be previewed.

 

Html Section Calculator Code

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser.

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.Inside the body tag the main content of the website lies.

Here I’m not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.
We have the following part in the HTML section.
  • First, we have a container that will enclose all other parts of the Calculator project.
  • Then we have div with id keyword with multiple buttons.As we need many buttons for every number 0to 9 and for different type of operators as well as different type of functions like deleting the previous letter or deleting all letters.
Go through the below code 👇 and run it in your IDE or where you used to design just HTML without CSS styling.
<html>
    <head>
        href="https://fonts.googleapis.com/css?family=Open+Sans:600,700"
        rel="stylesheet">
        <title>A simple calculator</title>
    </head>
    <body>
        <div id="container">
            <div id="calculator">
                <div id="result">
                    <div id="history"><p id="history-value"></p></div>
                    <div id="output"><p id="output-value"></p></div>
                </div>
                <div id="keyboard">
                    <button class="operator" id="clear">C</button>
                    <button class="operator" id="backspace">CE</button>
                    <button class="operator" id="%">%</button>
                    <button class="operator" id="/">&#247;</button>
                    <button class="number" id="7">7</button>
                    <button class="number" id="8">8</button>
                    <button class="number" id="9">9</button>
                    <button class="operator" id="*">&times;</button>
                    <button class="number" id="4">4</button>
                    <button class="number" id="5">5</button>
                    <button class="number" id="6">6</button>
                    <button class="operator" id="-">-</button>
                    <button class="number" id="1">1</button>
                    <button class="number" id="2">2</button>
                    <button class="number" id="3">3</button>
                    <button class="operator" id="+">+</button>
                    <button class="empty" id="empty"></button>
                    <button class="number" id="0">0</button>
                    <button class="empty" id="empty"></button>
                    <button class="operator" id="=">=</button>
                </div>
            </div>
        </div>
    </body>
</html>

Css Section Calculator Code

Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

By CSS we will design our container and will bring it to the center and then we will design each and every button and will give an awesome border radius to our container and set the fixed width to the display property.
The Below code will analyze you more👇. So just add in your HTML half-complete file and wait to watch some magic.

body{
font-family: 'Open Sans',sans-serif;
background-color: black;
}
#container{
width: 1000px;
height: 550px;
background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3));
margin: 20px auto;
}
#calculator{
width: 320px;
height: 520px;
background-color: #eaedef;
margin: 0 auto;
top: 20px;
position: relative;
border-radius: 50px 0 50px 0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#result{
height: 120px;
}
#history{
text-align: right;
height: 20px;
margin: 0 20px;
padding-top: 20px;
font-size: 15px;
color: #000;
}
#output{
text-align: right;
height: 60px;
margin: 10px 20px;
font-size: 30px;
}
#keyboard{
height: 400px;
}
.operator, .number, .empty{
width: 50px;
height: 50px;
margin: 15px;
float: left;
border-radius: 50% 0 50 %;
border-width: 0;
font-weight: bold;
font-size: 15px;
}
.number, .empty{
background-color: #eaedef;
}
.number, .operator{
cursor: pointer;
}
.operator:active, .number:active{
font-size: 13px;
}
.operator:focus, .number:focus, .empty:focus{
outline: 0;
}
button:nth-child(4){
font-size: 20px;
background-color: #20b2aa;
}
button:nth-child(8){
font-size: 20px;
background-color: #ffa500;
}
button:nth-child(12){
font-size: 20px;
background-color: #f08080;
}
button:nth-child(16){
font-size: 20px;
background-color: #7d93e0;
}
button:nth-child(20){
font-size: 20px;
background-color: #ffffff;
}

 

Javascript Section Calculator Code

In the Javascript part, we will add magic logic as initially when our page will be loaded then our only static calculator will be previewed, and for operating with button functionality we will this js file.

For observing this magic for this project then you should add the js file with the rest of the HTML and CSS file and enjoy this project and deploy it on Github.
 

A live preview of our project is attached below refer to this codepen

function getHistory(){
    return document.getElementById("history-value").innerText;
}
function printHistory(num){
    document.getElementById("history-value").innerText=num;
}
function getOutput(){
    return document.getElementById("output-value").innerText;
}
function printOutput(num){
    if(num==""){
        document.getElementById("output-value").innerText=num;
    }
    else{
        document.getElementById("output-value").innerText=getFormattedNumber(num);
    }	
}
function getFormattedNumber(num){
    if(num=="-"){
        return "";
    }
    var n = Number(num);
    var value = n.toLocaleString("en");
    return value;
}
function reverseNumberFormat(num){
    return Number(num.replace(/,/g,''));
}
var operator = document.getElementsByClassName("operator");
for(var i =0;i<operator.length;i++){
    operator[i].addEventListener('click',function(){
        if(this.id=="clear"){
            printHistory("");
            printOutput("");
        }
        else if(this.id=="backspace"){
            var output=reverseNumberFormat(getOutput()).toString();
            if(output){//if output has a value
                output= output.substr(0,output.length-1);
                printOutput(output);
            }
        }
        else{
            var output=getOutput();
            var history=getHistory();
            if(output==""&&history!=""){
                if(isNaN(history[history.length-1])){
                    history= history.substr(0,history.length-1);
                }
            }
            if(output!="" || history!=""){
                output= output==""?output:reverseNumberFormat(output);
                history=history+output;
                if(this.id=="="){
                    var result=eval(history);
                    printOutput(result);
                    printHistory("");
                }
                else{
                    history=history+this.id;
                    printHistory(history);
                    printOutput("");
                }
            }
        }
        
    });
}
var number = document.getElementsByClassName("number");
for(var i =0;i<number.length;i++){
    number[i].addEventListener('click',function(){
        var output=reverseNumberFormat(getOutput());
        if(output!=NaN){ //if output is a number
            output=output+this.id;
            printOutput(output);
        }
    });
}

 

By this blog… We have learned how we can design an Awesome UI Responsive Calculator Project HTML CSS JAVASCRIPT.

Final Output Of Calculator Project

Now I’m looking for your reviews.

So, How was the blog 😁, Learners!
If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊
I hope that I’m able to make you understand this topic and that you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills bloggers’ hearts with enthusiasm for writing more new blogs.
You can follow me on Instagram 
Written by @Ankit kumar
Code by @arsalan-dada
Share on:

Leave a Comment