Scribd
Upload
23 views3 pages

Calculator

Uploaded by

fniha7288
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
23 views3 pages

Calculator

Uploaded by

fniha7288
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/ 3

PART-B

2. CREATE A WEB PAGE CONTAINING SIMPLE CALCULATOR WHICH SHOULD HAVE BASIC
ARITHMETIC OPERATIONS:-

<!DOCTYPE html>
<html>

<head>
<style>
table {
border: 5px solid black;
margin-left: auto;
margin-right: auto;
background-color: black;
}

input[type="button"] {
width: 100%;
padding: 20px 40px;
background-color: Darkviolet;
color: white;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
}

input[type="text"] {
padding: 20px 30px;
font-size: 24px;
font-weight: bold;
border: none;
border-radius: 5px;
border: 2px solid black;
}
</style>
</head>
<!-- create table -->

<body>
<table id="calcu">
<tr>
<td colspan="3"><input type="text" id="result"></td>
<!-- clr() function will call clr to clear all value -->
<td><input type="button" value="c" onclick="clr()" /> </td>
</tr>
<tr>
<!-- create button and assign value to each button -->
<!-- dis("1") will call function dis to display value -->
<td><input type="button" value="1" onclick="dis('1')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="2" onclick="dis('2')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="3" onclick="dis('3')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="/" onclick="dis('/')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="5" onclick="dis('5')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="6" onclick="dis('6')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="-" onclick="dis('-')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="8" onclick="dis('8')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="9" onclick="dis('9')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="+" onclick="dis('+')"
onkeydown="myFunction(event)"> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"
onkeydown="myFunction(event)"> </td>
<td><input type="button" value="0" onclick="dis('0')"
onkeydown="myFunction(event)"> </td>

<!-- solve function call function solve to evaluate value -->


<td><input type="button" value="=" onclick="solve()"> </td>

<td><input type="button" value="*" onclick="dis('*')"


onkeydown="myFunction(event)"> </td>
</tr>
</table>

<script>
function dis(val) {
document.getElementById("result").value += val
}

function myFunction(event) {
if (event.key == '0' || event.key == '1'
|| event.key == '2' || event.key == '3'
|| event.key == '4' || event.key == '5'
|| event.key == '6' || event.key == '7'
|| event.key == '8' || event.key == '9'
|| event.key == '+' || event.key == '-'
|| event.key == '*' || event.key == '/')
document.getElementById("result").value += event.key;
}

var cal = document.getElementById("calcu");


cal.onkeyup = function (event) {
if (event.keyCode === 13) {
console.log("Enter");
let x = document.getElementById("result").value
console.log(x);
solve();
}
}

function solve() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}
// Function that clear the display
function clr() {
document.getElementById("result").value = ""
}
</script>
</body>
</html>

You might also like