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)
}
Comments
Post a Comment