Scribd
Upload
4 views4 pages

Htmlviewer HTML

The document is an HTML code for a multifunctional calculator with a user interface styled using CSS. It includes basic operations like addition, subtraction, multiplication, and division, as well as advanced functions such as square root and trigonometric calculations. JavaScript functions handle the calculator's logic for input, operations, and displaying results.

Uploaded by

prashant patil
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
4 views4 pages

Htmlviewer HTML

The document is an HTML code for a multifunctional calculator with a user interface styled using CSS. It includes basic operations like addition, subtraction, multiplication, and division, as well as advanced functions such as square root and trigonometric calculations. JavaScript functions handle the calculator's logic for input, operations, and displaying results.

Uploaded by

prashant patil
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/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multifunctional Calculator</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #1a1a1a;
font-family: Arial, sans-serif;
}

.calculator {
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

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

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

button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #444;
color: white;
transition: background-color 0.3s;
}

button:hover {
background-color: #555;
}

.operator {
background-color: #ff9500;
}

.operator:hover {
background-color: #ffaa33;
}

.advanced {
background-color: #4a4a4a;
}

.equals {
background-color: #007AFF;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<!-- Advanced Functions -->
<button class="advanced" onclick="addFunction('Math.sqrt(')">√</button>
<button class="advanced"
onclick="addFunction('Math.sin(')">sin</button>
<button class="advanced"
onclick="addFunction('Math.cos(')">cos</button>
<button class="advanced"
onclick="addFunction('Math.tan(')">tan</button>
<button class="advanced" onclick="addFunction('Math.log(')">ln</button>

<!-- Basic Operations -->


<button onclick="clearDisplay()">C</button>
<button onclick="backspace()">⌫</button>
<button onclick="addOperator('%')">%</button>
<button class="operator" onclick="addOperator('/')">/</button>
<button onclick="addNumber('7')">7</button>
<button onclick="addNumber('8')">8</button>
<button onclick="addNumber('9')">9</button>
<button class="operator" onclick="addOperator('*')">×</button>
<button onclick="addNumber('4')">4</button>
<button onclick="addNumber('5')">5</button>
<button onclick="addNumber('6')">6</button>
<button class="operator" onclick="addOperator('-')">-</button>
<button onclick="addNumber('1')">1</button>
<button onclick="addNumber('2')">2</button>
<button onclick="addNumber('3')">3</button>
<button class="operator" onclick="addOperator('+')">+</button>
<button onclick="addNumber('0')">0</button>
<button onclick="addNumber('.')">.</button>
<button onclick="addFunction('Math.PI')">π</button>
<button class="equals" onclick="calculate()" style="grid-column: span
2">=</button>
</div>
</div>

<script>
let display = document.getElementById('display');
let currentNumber = '';
let firstNumber = '';
let operator = '';

function addNumber(num) {
currentNumber += num;
display.value = currentNumber;
}

function addOperator(op) {
if (currentNumber === '') return;
firstNumber = currentNumber;
operator = op;
currentNumber = '';
display.value = op;
}

function addFunction(func) {
try {
if (func.includes('(')) {
currentNumber = eval(func + currentNumber + ')').toString();
} else {
currentNumber = eval(func).toString();
}
display.value = currentNumber;
} catch (error) {
display.value = 'Error';
currentNumber = '';
}
}

function calculate() {
if (firstNumber === '' || currentNumber === '') return;

try {
let result;
const num1 = parseFloat(firstNumber);
const num2 = parseFloat(currentNumber);

switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
case '%':
result = (num1 * num2) / 100;
break;
}

currentNumber = result.toString();
display.value = currentNumber;
firstNumber = '';
operator = '';
} catch (error) {
display.value = 'Error';
currentNumber = '';
}
}

function clearDisplay() {
currentNumber = '';
firstNumber = '';
operator = '';
display.value = '';
}

function backspace() {
currentNumber = currentNumber.slice(0, -1);
display.value = currentNumber;
}
</script>
</body>
</html>

You might also like