Scribd
Upload
4 views

Index Html

The document is an HTML code for a simple calculator web application named 'Mr. X Calculator'. It allows users to input two numbers and select an arithmetic operation (addition, subtraction, multiplication, division, or power) to perform calculations. The result is displayed on the web page after the user clicks the 'Calculate' button.

Uploaded by

anjalikriom108
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
4 views

Index Html

The document is an HTML code for a simple calculator web application named 'Mr. X Calculator'. It allows users to input two numbers and select an arithmetic operation (addition, subtraction, multiplication, division, or power) to perform calculations. The result is displayed on the web page after the user clicks the 'Calculate' button.

Uploaded by

anjalikriom108
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/ 12

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Mr. X Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px
rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
color: #333;
}
input[type="number"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
select {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 1.2em;
color: #333;
}
</style>
</head>
<body>
<div class="calculator">
<h1>Mr. X Calculator</h1>
<input type="number"
id="num1" placeholder="Enter
first number">
<input type="number"
id="num2" placeholder="Enter
second number">
<select id="operation">
<option value="add">Add
(+)</option>
<option
value="subtract">Subtract
(-)</option>
<option
value="multiply">Multiply
(*)</option>
<option
value="divide">Divide
(/)</option>
<option
value="power">Power
(^)</option>
</select>
<button
onclick="calculate()">Calculate</
button>
<div class="result"
id="result"></div>
</div>
<script>
function calculate() {
const num1 =
parseFloat(document.getElement
ById('num1').value);
const num2 =
parseFloat(document.getElement
ById('num2').value);
const operation =
document.getElementById('oper
ation').value;
let result;

switch (operation) {
case 'add':
result = num1 + num2;
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiply':
result = num1 * num2;
break;
case 'divide':
result = num2 !== 0 ?
num1 / num2 : 'Error! Division by
zero.';
break;
case 'power':
result = Math.pow(num1,
num2);
break;
default:
result = 'Invalid operation';
}

document.getElementById('result
').innerText = `Result: ${result}`;
}
</script>
</body>
</html>

You might also like