Scribd
Upload
7 views

WT Practical 3_1.docx

Uploaded by

yugamvyas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

WT Practical 3_1.docx

Uploaded by

yugamvyas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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 __

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy