Simple Calculator Program Using Javascript In Html

Demo👀

How do you make a basic calculator with JavaScript?

1st Step:-

First you open your HTML Editor like - Notepad++,Subline Text,Brackets, etc.

Then start program use Html, Css, Javascript.

2nd Step:-

Copy the html code and then Paste your HTML Editor into <body> here </body> section.

HTML Code :-

<div class="container">
        <form name="form" id="myForm">
        <div class="display">
            <input type="text" placeholder="0" name="displayResult"  />  
        </div>
<input type="button" onclick="myFunction()" value="C" class="red">
        <h2>
JavaSctipt Calculator</h2>
<div class="row">
                <input type="button" name="b7" value="7" onClick="calcNumbers(b7.value)">
                  <input type="button" name="b8" value="8" onClick="calcNumbers(b8.value)">
                  <input type="button" name="b9" value="9" onClick="calcNumbers(b9.value)">
                  <input type="button" name="addb" value="+" onClick="calcNumbers(addb.value)">
                </div>
<div class="row">
                <input type="button" name="b4" value="4" onClick="calcNumbers(b4.value)">
                  <input type="button" name="b5" value="5" onClick="calcNumbers(b5.value)">
                  <input type="button" name="b6" value="6" onClick="calcNumbers(b6.value)">
                  <input type="button" name="subb" value="-" onClick="calcNumbers(subb.value)">
                </div>
<div class="row">
                <input type="button" name="b1" value="1" onClick="calcNumbers(b1.value)">
                  <input type="button" name="b2" value="2" onClick="calcNumbers(b2.value)">
                  <input type="button" name="b3" value="3" onClick="calcNumbers(b3.value)">
                  <input type="button" name="mulb" value="*" onClick="calcNumbers(mulb.value)">
                </div>
<div class="row">
                <input type="button" name="b0" value="0" onClick="calcNumbers(b0.value)">
                  <input type="button" name="potb" value="." onClick="calcNumbers(potb.value)">
                  <input type="button" name="divb" value="/" onClick="calcNumbers(divb.value)">
                  <input type="button" class="green" value="=" onClick="displayResult.value=eval(displayResult.value)">
                </div>
</div>
</form>
</div>

3rd Step:-

Copy the css code and then Paste your HTML Editor into <head> here </head> section.

CSS Code :-

<style type="text/css">
  
body, html {
    background: #ECEDEF;
    margin: 0;
    padding: 0;
}
 
.container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.2);
    border-radius: 14px;
    padding-bottom: 20px;
    width: 320px;
    
}
.display {
    width: 100%;
    height: 60px;
    padding: 40px 0;
    background: #7FFFD4;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
}
.buttons {
    padding: 20px 20px 0 20px;
}
.row {
    width: 280px;
    float: left;
}
input[type=button] {
    width: 60px;
    height: 60px;
    float: left;
    padding: 0;
    margin: 5px;
    box-sizing: border-box;
    background: #ecedef;
    border: none;
    font-size: 30px;
    line-height: 30px;
    border-radius: 50%;
    font-weight: 700;
    color: #5E5858;
    cursor: pointer;
    
}
input[type=text] {
    width: 270px;
    height: 60px;
    float: left;
    padding: 0;
    box-sizing: border-box;
    border: none;
    background: none;
    color: #000000;
    text-align: right;
    font-weight: 700;
    font-size: 60px;
    line-height: 60px;
    margin: 0 25px;
    
}
.red {
    background: #FF0509 !important;
    color: #ffffff !important;
    
}
.green {
    background: #4ff703 !important;
    color: #ffffff !important;
    
}

</style>

4th Step:-

Copy the JavaScript code and then Paste your HTML editor into the upper </body>.

Javascript Code:-

 <script>
         function calcNumbers(result){
        form.displayResult.value=form.displayResult.value+result;
        
    }
    function myFunction() {
  document.getElementById("myForm").reset();
}
    </script>

How To Download This Project

The first step you click on the ''Download Project'' button you will see a new popup, then click on again the ''Download'' button. Now your project will be downloaded.

1Add

Simple Calculator Program Using Javascript In Html

Demo👀

How do you make a basic calculator with JavaScript?

How To Download This Project

Project source Code

Related Project

Post a Comment

0 Comments

Followers

Followers

Popular Posts

Best 40+ javascript projects for beginners With Source Code

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

[Best Of] Javascript vs Java Language Difference Between

1Add

Simple Calculator Program Using Javascript In Html

Demo👀

How do you make a basic calculator with JavaScript?

How To Download This Project

Project source Code

Simple Calculator Source Code

Related Project

You may like these posts

Post a Comment

0 Comments

Followers

Followers

Social Plugin

Popular Posts

Best 40+ javascript projects for beginners With Source Code

DATE OF BIRTH | Age Calculator Using JavaScript | Beginner

[Best Of] Javascript vs Java Language Difference Between