Calculator_Chaitu_Informative_Blogs


Hello, my dear people, today I have come up with another good task for you: creating a beautiful and simple calculator by using HTML and CSS, Javascript only.

This calculator will be very useful for you. This program is useful for making calculations on your laptop or desktop if the calculator application is not working properly or for solving any calculations quickly.

To design this program, I used HTML and CSS, JavaScript and designed it for you. I did not use any other frameworks that were difficult in this program, I only did it using simple coding.

Feel free to use this program code that I am giving you as well as make the changes you like and change it into your own style. try to learn to code easily so by making such efforts you will learn new tricks quickly.

Also, Read

File name: Calculator.html

<!DOCTYPE html>
<html lang="EN">

<head>
<title>Simple Calculator</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<link rel="stylesheet" href="Style.css">
<h2>Created by Chaitu Informative Blogs</h2>
<div class="container">
<form name="myform">
<input type="text" name="textview" class="textview" disabled>
</form>
<table>

<tr>
<td><input type="button"  class="button blue symbol" value="√"onclick="SR('r')"id="r" disabled></td>
<td><input type="button"  class="button blue symbol" value=" x²"onclick="SR('s')"id="r" disabled></td>
<td><input type="button"  class="button blue symbol" value="⌫"onclick="back()"></td>
<td><input type="button"  class="button blue symbol" value="÷" onclick="insertOp('/')"></td>
</tr>

<tr>
<td><input type="button"  class="button gray number" value="7" onclick="insertNum(7)"></td>
<td><input type="button"  class="button gray number" value="8" onclick="insertNum(8)"></td>
<td><input type="button"  class="button gray number" value="9" onclick="insertNum(9)"></td>
<td><input type="button"  class="button blue symbol" value="×" onclick="insertOp('*')"></td>
</tr>

<tr>
<td><input type="button"  class="button gray number" value="4" onclick="insertNum(4)"></td>
<td><input type="button"  class="button gray number" value="5" onclick="insertNum(5)"></td>
<td><input type="button"  class="button gray number" value="6" onclick="insertNum(6)"></td>
<td><input type="button"  class="button blue symbol" value="-" onclick="insertOp('-')"></td>
</tr>

<tr>
<td><input type="button"  class="button gray number" value="1" onclick="insertNum(1)"></td>
<td><input type="button"  class="button gray number" value="2" onclick="insertNum(2)"></td>
<td><input type="button"  class="button gray number" value="3" onclick="insertNum(3)"></td>
<td><input type="button"  class="button blue symbol" value="+" onclick="insertOp('+')"></td>
</tr>

<tr>
<td><input type="button"  class="button blue symbol" value="C" onclick="clean()"></td>
<td><input type="button"  class="button gray number" value="0" onclick="insertNum(0)"></td>
<td><input type="button"  class="button blue symbol" value="." onclick="insertDec()"></td>
<td><input type="button"  class="button blue symbol" value="=" onclick="equalTo()"></td>
</tr>

</table>
</div>
<script src="Calculation.js"></script>
</body>
</html>


File name: Style.css

* {
margin:0px;
padding:0px;
}

body {
background-color: rgba(251, 5, 128, 0.596);
}

h2 {
margin-top: 30px;
margin-left: 355px;
font-weight: bolder;
background-image: linear-gradient(to right, #fcfcfd, #02afff);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; 
-moz-background-clip: text;
-moz-text-fill-color: transparent;
user-select:none;
}

.button {
width:75px;
height:50px;
font-size:25px;
margin:2px;
cursor:pointer;
border:none;
}

.textview {
width:305px;
margin:5px;
font-size:25px;
border:none;
background-color:transparent;
}

.container {
width:346px;
height:332px;
background-color:#5beef8;
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%)translateY(-50%);
border-radius: 10px;
border:1px solid black;
box-shadow: 0 0 10px black;
}

.number {
background-color:white;
font-weight:bold;
}
 
.symbol {
background-color:#fbfbfb;
}

.gray:hover {
background-color:#e0e0e0;
transform: scale(.9);
z-index: -1;
transition: .5s;
box-shadow: 0 0 5px black;
}

.blue:hover {
background-color:hotpink;
transform: scale(.9);
z-index: -1;
transition: .5s;
color:white;
box-shadow:  0 0 5px black;
}


File name: Calculation.js

var exp=' ',number,decimal,equal,operator, allowSR=true;
var textview=document.forms['myform']['textview'];
function insertNum(num)
{

if(equal) {
exp=num;
textview.value=exp;
number=true;
equal=false;
}

else {
exp=textview.value+num;
textview.value=exp;
number=true;
}

if(operator) decimal=false;
SR('a');
}

function insertOp(op) {
textview.value=exp+op;
operator=true;
equal=false;
allowSR=false;
SR('a');
}

function insertDec() {
if(number&&!decimal) {
textview.value=exp+'.';
decimal=true;
operator=false;
}
}

function equalTo() {
if(exp) {
exp=eval(exp);
textview.value=exp;
equal=true;
decimal=false;
number=false;
allowSR=true;
SR('a');
}
}

function clean() {
exp='';
textview.value=exp;
decimal=false;
}

function back() {
exp=textview.value;
exp=exp.substring(0, exp.length-1);
textview.value=exp;
}

function SR(x) {
if(x=='r') {
exp=Math.sqrt(exp);
textview.value=exp;
}
else if(x=='s')
{
exp=exp*exp;
textview.value=exp;
}
else if(x=='a'&&allowSR) {
document.getElementById('r').disabled=false;
document.getElementById('s').disabled=false;
}
else if(!allowSR) {
document.getElementById('r').disabled=true;
document.getElementById('s').disabled=true;
}
}

Result:

Result_Chaitu_Informative_Blogs


Please, like and follow my blog for more interesting updates and also share with your friends and family members. Happy Coding.