Scribd
Upload
40 views

html Calculator

This document is an HTML code for a simple calculator application. It includes a user interface with buttons for numbers, operations, and functionalities like clear, backspace, power, square root, reciprocal, and calculate. The calculator uses JavaScript to handle user inputs and perform calculations displayed in a read-only text field.

Uploaded by

johnboysilvano
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
40 views

html Calculator

This document is an HTML code for a simple calculator application. It includes a user interface with buttons for numbers, operations, and functionalities like clear, backspace, power, square root, reciprocal, and calculate. The calculator uses JavaScript to handle user inputs and perform calculations displayed in a read-only text field.

Uploaded by

johnboysilvano
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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Calculator</title>

<style>

table {

border-collapse: collapse;

width: 30px;

margin: 0 auto;

td {

border: .5px solid black;

padding: 5px;

text-align: center;

min-width: 10px;

</style>

</head>

<body>

<table>

<tr>

<td colspan="5">

<input type="text" id="display" style="width: 90%; text-align: right;" readonly>

</td>

</tr>

<td colspan="3">

<button onclick="clearLast()">Back space</button></td>


<td><button onclick="clearDisplay()">C</button></td>

<td><button onclick="powerOffButton()">off</button></td>

</tr>

<tr>

<td><button onclick="appendToDisplay('7')">7</button></td>

<td><button onclick="appendToDisplay('8')">8</button></td>

<td><button onclick="appendToDisplay('9')">9</button></td>

<td><button onclick="appendToDisplay('/')">÷</button></td>

<td><button onclick="power()">x^</button></td>

</tr>

<tr>

<td><button onclick="appendToDisplay('4')">4</button></td>

<td><button onclick="appendToDisplay('5')">5</button></td>

<td><button onclick="appendToDisplay('6')">6</button></td>

<td><button onclick="appendToDisplay('*')">×</button></td>

<td><button onclick="squareRoot()">√</button></td>

</tr>

<tr>

<td><button onclick="appendToDisplay('1')">1</button></td>

<td><button onclick="appendToDisplay('2')">2</button></td>

<td><button onclick="appendToDisplay('3')">3</button></td>

<td><button onclick="appendToDisplay('-')">-</button></td>

<td><button onclick="reciprocal()">1/x</button></td>

</tr>

<tr>

<td><button onclick="appendToDisplay('0')">0</button></td>

<td><button onclick="positiveNegative()">±</button></td>

<td><button onclick="appendToDisplay('.')">.</button></td>

<td><button onclick="appendToDisplay('+')">+</button></td>
<td><button onclick="calculate()">=</button></td>

</tr>

</table>

<script>

let display = document.getElementById('display');

function appendToDisplay(value) {

display.value += value;

function clearDisplay() {

display.value = '0';

function powerOffButton() {

display.value='';

function clearLast() {

let displayValue = document.getElementById('display').value;

document.getElementById('display').value = displayValue.slice(0, -1);

function power() {

let currentVal = parseFloat(document.getElementById("display").value);

document.getElementById("display").value = Math.pow(currentVal,2);l
}

function squareRoot() {

let currentVal = parseFloat(document.getElementById("display").value);

document.getElementById("display").value = Math.sqrt(currentVal);

function reciprocal() {

let currentVal = parseFloat(document.getElementById("display").value);

document.getElementById("display").value = 1 / currentVal;

function positiveNegative() {

let currentVal = parseFloat(document.getElementById("display").value);

document.getElementById("display").value = -currentVal;

function calculate() {

try {

display.value = eval(display.value);

} catch(err) {

display.value = 'Error';

</script>
</body>

</html>

You might also like