Scribd
Upload
17 views

Web_Tech_Exp5-1

Uploaded by

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

Web_Tech_Exp5-1

Uploaded by

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

Experiment No 5

AIM: -Create a Functional Calculator which can perform all basic arithmetic
operation using the HTML CSS and Java Script.
We can create the function calculator first we will create three parts of this task
Frist we will create the HTML code which will include the html and in this link of an css file
and js file the name of HTML file is Calculator .html

CALCULATOR.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator</title>
<link rel="stylesheet" href="calculator.css">
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="appendToDisplay('')"></button>
<button onclick="deleteLast()">DEL</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>

1
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('0')" class="zero">0</button>
<button onclick="appendToDisplay('.')">.</button>
</div>
</div>

<script src="calculator.js"></script>
</body>
</html>

Calculator.css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}

2
.calculator {
width: 300px;
background-color: white;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
}

.display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
padding: 10px;
border: none;
margin-bottom: 20px;
background-color: #e9e9e9;
border-radius: 5px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}

button {
width: 100%;

3
padding: 20px;
font-size: 18px;
background-color: #f1f1f1;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s;
}

button:hover {
background-color: #dcdcdc;

button:active {
background-color: #bcbcbc;
color: red;
}
button.zero {
grid-column: span 2;
}

Calculator.js:
function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

4
function deleteLast() {
let currentValue = document.getElementById('display').value;
document.getElementById('display').value = currentValue.slice(0, -1);
}

function calculate() {
let currentValue = document.getElementById('display').value;
try {
document.getElementById('display').value = eval(currentValue);
} catch (e) {
document.getElementById('display').value = 'Error';
}
}
The output of the upper code is given below:

You might also like