IU2341231584 5th CSE-F2
Practical-3.1
Aim: Write a Javascript code to build a calculator.
A : Simple Calculator
Code:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body>
<input type="text" placeholder="Enetr A" id="a">
<input type="text" placeholder="Enetr B" id="b">
<br><br>
<input type="button" value="+" onclick="sum()">
<input type="button" value="-" onclick="sub()">
<input type="button" value="*" onclick="mul()">
<input type="button" value="/" onclick="div()">
<h1 id="sum"></h1>
<h1 id="sub"></h1>
<h1 id="mul"></h1>
<h1 id="div"></h1>
</body>
</html>
<script>
function sum()
{
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var sum = a+b;
document.getElementById('sum').innerHTML= sum;
}
function sub()
{
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var sub = a-b;
document.getElementById('sub').innerHTML= sub;
CE0522 WEB TECHNOLOGY Page No __
IU2341231584 5th CSE-F2
}
function mul()
{
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var mul = a*b;
document.getElementById('mul').innerHTML= mul;
}
function div()
{
var a = parseInt(document.getElementById('a').value);
var b = parseInt(document.getElementById('b').value);
var div = a/b;
document.getElementById('div').innerHTML= div;
}
</script>
Output:
CE0522 WEB TECHNOLOGY Page No __
IU2341231584 5th CSE-F2
B : iPhone Calculator
Code:
<!doctype html>
<html>
<head>
<title>iPhone Calculator</title>
<style>
.calculator {
background: black;
border-radius: 50px;
color: white;
height: 1050px;
padding: 20px;
position: relative;
width: 563px;
}
.top-container {
display: flex;
height: 230px;
justify-content: space-between;
padding: 0 20px;
}
.value {
font-size: 130px;
font-weight: 300;
height: 158px;
width: 550px;
background-color: black;
color: #ffffff;
margin-bottom: 20px;
margin-right: 20px;
text-align: right;
border: 0px;
}
.buttons-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, 1fr);
}
CE0522 WEB TECHNOLOGY Page No __
IU2341231584 5th CSE-F2
.button {
align-items: center;
background: #333;
border-radius: 50%;
cursor: pointer;
display: flex;
font-size: 45px;
height: 110px;
justify-content: center;
transition: filter 0.3s;
width: 110px;
}
.button.function {
color: black;
background: #a5a5a5;
}
.button.operator {
background: #f1a33c;
}
.button.number-0 {
border-radius: 55px;
grid-column: 1 / span 2;
justify-content: flex-start;
padding-left: 43px;
width: 250px;
}
.button:active,
.button:focus {
filter: brightness(120%);
}
.bottom {
width: 200px;
height: 5px;
background: white;
border-radius: 4px;
position: absolute;
bottom: 10px;
left: 50%;
CE0522 WEB TECHNOLOGY Page No __
IU2341231584 5th CSE-F2
transform: translateX(-50%);
}
</style>
</head>
<body>
<center>
<div id="app" class="calculator">
<div class="top-container" id="calculator_input_Number_Previews">
</div>
<div><input type="text" class="value" id="calculator_input_Number">
<div class="buttons-container">
<div class="button function ac" id="Calculator_input_AC">AC</div>
<div class="button function pm">±</div>
<div class="button function percent" onclick="display('%')">%</div>
<div class="button operator division" onclick="display('/')">÷</div>
<div class="button number-7" onclick="display('7')">7</div>
<div class="button number-8" onclick="display('8')">8</div>
<div class="button number-9" onclick="display('9')">9</div>
<div class="button operator multiplication" onclick="display('*')">×</div>
<div class="button number-4" onclick="display('4')">4</div>
<div class="button number-5" onclick="display('5')">5</div>
<div class="button number-6" onclick="display('6')">6</div>
<div class="button operator subtraction" onclick="display('-')">−</div>
<div class="button number-1" onclick="display('1')">1</div>
<div class="button number-2" onclick="display('2')">2</div>
<div class="button number-3" onclick="display('3')">3</div>
<div class="button operator addition" onclick="display('+')">+</div>
<div class="button number-0" onclick="display('0')">0</div>
<div class="button decimal">.</div>
<div class="button operator equal" onclick="displaySolve()" >=</div>
</div>
<div class="bottom"></div>
</div>
</center>
</body>
</html>
<script>
let c_input = document.getElementById('calculator_input_Number');
let Calculator_input_AC_V = document.getElementById('Calculator_input_AC');
let DisplayValue;
CE0522 WEB TECHNOLOGY Page No __
IU2341231584 5th CSE-F2
function display(DisplayValue) {
c_input.value += DisplayValue;
}
Calculator_input_AC_V.addEventListener('click', () => {
c_input.value = "";
})
function displaySolve()
{
let eq = c_input.value;
let y = eval(eq);
c_input.value = y;
}
</script>
Output:
CE0522 WEB TECHNOLOGY Page No __
