Scribd
Upload
2 views3 pages

Htmlviewer.html 2

This document is an HTML code for a simple calculator that uses HTML, CSS, and JavaScript. It includes a user interface with buttons for digits and operations, a display box for results, and functions to clear the screen, display values, and calculate results. The calculator handles basic arithmetic operations and includes error handling for division by zero.

Uploaded by

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

Htmlviewer.html 2

This document is an HTML code for a simple calculator that uses HTML, CSS, and JavaScript. It includes a user interface with buttons for digits and operations, a display box for results, and functions to clear the screen, display values, and calculate results. The calculator handles basic arithmetic operations and includes error handling for division by zero.

Uploaded by

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

<!

DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>Simple Calculator using HTML, CSS and JavaScript</title>
<!--<link rel="stylesheet" href="styles.css">-->
<style>
body{
font-family: 'Orbitron', sans-serif;
}
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}

.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}

#btn {
background-color: #fb0066;
}

input[type=button] {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}

input:active[type=button] {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}
</style>
<script>// This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}
// This function display values
function display(value) {
var currentDisplay=document.getElementById("result").value;
if(value==='.'&&currentDisplay.includes('.')){
return;
}
document.getElementById("result").value += value;

// This function evaluates the expression and returns result


function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
if(q===Infinity||q===-Infinity){
document.getElementById("result").value="Divide by Zero";
}else
document.getElementById("result").value = q;
}</script>
</head>

<body>

<table class="calculator" >


<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled />
</td>

<!-- clearScreen() function clears all the values -->


<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>

<!-- calculate() function evaluates the mathematical expression -->


<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
</body>

</html>

You might also like