[go: up one dir, main page]
Scribd
Upload
11 views4 pages

Calculator

The document is an HTML code for a scientific calculator web application. It includes a user interface with buttons for various mathematical operations, including trigonometric functions, logarithms, and basic arithmetic. The calculator's functionality is implemented using JavaScript to handle user input and perform calculations.

Uploaded by

milanimahlati.12
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
11 views4 pages

Calculator

The document is an HTML code for a scientific calculator web application. It includes a user interface with buttons for various mathematical operations, including trigonometric functions, logarithms, and basic arithmetic. The calculator's functionality is implemented using JavaScript to handle user input and perform calculations.

Uploaded by

milanimahlati.12
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>Scientific Calculator</title>
<style>
/* Add your styles here */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
margin: 50px;
background-color: #f4f4f4;
}

h1 {
color: #333;
}

#calculator {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 10px;
max-width: 500px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input, button {
width: 100%;
height: 50px;
font-size: 16px;
margin: 5px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
cursor: pointer;
transition: background-color 0.3s;
}

input {
grid-column: span 5;
}

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

button.operator {
background-color: #ff8c00;
color: #fff;
}
button.operator:hover {
background-color: #e07b00;
}

button.trig, button.log {
background-color: #4caf50;
color: #fff;
}

button.trig:hover, button.log:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Scientific Calculator</h1>

<div id="calculator">
<input type="text" id="display" readonly>
<button onclick="clearDisplay()" class="operator">C</button>
<button onclick="appendToDisplay('(')" class="operator">(</button>
<button onclick="appendToDisplay(')')" class="operator">)</button>
<button onclick="power()" class="operator">^</button>
<button onclick="squareRoot()" class="trig">√</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="sin()" class="trig">sin</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="cos()" class="trig">cos</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')" class="operator">-</button>
<button onclick="tan()" class="trig">tan</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()" class="operator">=</button>
<button onclick="appendToDisplay('+')" class="operator">+</button>
<button onclick="log()" class="log">log</button>
<button onclick="ln()" class="log">ln</button>
</div>

<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}

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

function calculate() {
try {
const result = eval(document.getElementById('display').value);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}

function power() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
appendToDisplay('**');
}
}

function squareRoot() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
const result = Math.sqrt(parseFloat(currentValue));
document.getElementById('display').value = result;
}
}

function sin() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
const result = Math.sin(parseFloat(currentValue));
document.getElementById('display').value = result;
}
}

function cos() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
const result = Math.cos(parseFloat(currentValue));
document.getElementById('display').value = result;
}
}

function tan() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
const result = Math.tan(parseFloat(currentValue));
document.getElementById('display').value = result;
}
}

function log() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
const result = Math.log10(parseFloat(currentValue));
document.getElementById('display').value = result;
}
}

function ln() {
const currentValue = document.getElementById('display').value;
if (currentValue !== '') {
const result = Math.log(parseFloat(currentValue));
document.getElementById('display').value = result;
}
}
</script>
</body>
</html>

You might also like