How to Create a Calculator 


Introduction

Calculator is one of the basic projects of JavaScript or any other languages a newbie programmer should probably know how to create it.The best thing of this is that the coding is short and easy to understand. It is a basic project that perform arithmetical operations. All you have to do is to create a button for each number, arithmetic operations. symbols and then add a text-box or input-field.


Here is the Output of Dark Calculator:







Output:




Source Code:


Index.html:

Here is the html coding :)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Calculator</title>
<link rel="stylesheet" href="styel.css">
</head>
<body>
<div class="main">
<div>
<input id="result" type="text">
<button class="btn" onclick="getNumber('1')">1</button>
<button class="btn" onclick="getNumber('2')">2</button>
<button class="btn" onclick="getNumber('3')">3</button>
<button class="btn" onclick="getNumber('4')">4</button>
<button class="btn" onclick="getNumber('5')">5</button>
<button class="btn" onclick="getNumber('6')">6</button>
<button class="btn" onclick="getNumber('7')">7</button>
<button class="btn" onclick="getNumber('8')">8</button>
<button class="btn" onclick="getNumber('9')">9</button>
<button class="btn" onclick="getNumber('.')">.</button>
<button class="btn" onclick="getNumber('0')">0</button>
<button class="btn" onclick="getResult()">=</button>
</div>
<div>
<button class="clear" onclick="clearResult()">C</button>
<button class="btn" onclick="getNumber('+')">+</button>
<button class="btn" onclick="getNumber('-')">-</button>
<button class="btn" onclick="getNumber('*')">x</button>
<button class="btn" onclick="getNumber('/')">/</button>
</div>
</div>
<h2 style=" font-family: Arial, Helvetica, sans-serif; text-decoration: underline; position: absolute; top: 20px;"> Created By:Arsalan Khan </h2>
</body>
<script src="app.js"></script>


Style.Css:

</html>


*{
    margin: 0; padding: 0;
    border: 0; outline: 0;
     box-sizing: border-box ;
     font-family: sans-serif;

}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
   background: rgb(223, 221, 224);
   

}
.main{
    display: flex;
    position: relative;
    width: 300px; height: 330px;
    padding: 30px;
    background: #232424f6;
    border-radius:6px;
    box-shadow: 2px 9px 43px rgba(2, 0, 0, .8);


}
.main input{
    margin: 6px 8px;
    width: 165px; height: 42px;
    line-height: 40px;
    padding-left:12px;
    font-size: 18px;
    color: white;
    letter-spacing: 1px;
    background: transparent;
    border-radius: 2px;
    border: 1px solid white;

}

.main button{
    cursor: pointer;
    margin: 7px 7px;
    width: 42px ; height: 42px;
    font-size: 18px;
    background: transparent;
    color: white;
    border-radius: 5px;
    border:1px solid white;
    transition: all .3s;

}
 .main button:hover{
     color: #1d1c1c;
     background: white;
 }

App.js:


function getNumber(num){ //declaration of a function where as getNumber is our function name and within the round braces we passed argument//
  
    var result=document.getElementById("result");
    
    result.value +=num; //This is used for get number, and we used plus sign for concatination
    
    }
    function clearResult(){
        var result = document.getElementById("result"); //This is used for get element via 'id'
        result.value = "" //This empty string which is used to clear input field//
    }
    
    function getResult(){
        var result = document.getElementById("result"); 
        result.value=eval(result.value)
    }