Scribd
Upload
15 views2 pages

Aspect Ratio Video Calc

The document is an HTML page containing two calculators: one for calculating video height based on aspect ratio and width, and another for performing basic arithmetic operations (addition, subtraction, multiplication, division, exponentiation, and percentage). Each calculator has input fields and buttons to trigger calculations, with results displayed in designated areas. The page is styled for a clean, centered layout.

Uploaded by

Momon
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
15 views2 pages

Aspect Ratio Video Calc

The document is an HTML page containing two calculators: one for calculating video height based on aspect ratio and width, and another for performing basic arithmetic operations (addition, subtraction, multiplication, division, exponentiation, and percentage). Each calculator has input fields and buttons to trigger calculations, with results displayed in designated areas. The page is styled for a clean, centered layout.

Uploaded by

Momon
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/ 2

<!

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>
body {
text-align: center;
}
.calculator {
display: inline-block;
text-align: left;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<div class="calculator" id="videoCalculator">
<h2>Video Aspect Ratio Calculator</h2>
<label for="aspectRatio">Aspect Ratio:</label>
<input type="text" id="aspectRatio" placeholder="Enter aspect ratio (e.g.,
16:9)">
<br><br>
<button onclick="calculateVideoSize()">Calculate</button>
<p id="videoSize" class="red"></p>
</div>

<div class="calculator" id="mathCalculator">


<h2>Simple Math Calculator</h2>
<label for="num1">Number 1:</label>
<input type="number" id="num1">
<br><br>
<label for="num2">Number 2:</label>
<input type="number" id="num2">
<br><br>
<button onclick="calculate('+')">Addition (+)</button>
<button onclick="calculate('-')">Subtraction (-)</button>
<button onclick="calculate('*')">Multiplication (*)</button>
<button onclick="calculate('/')">Division (/)</button>
<button onclick="calculate('**')">Exponentiation (^)</button>
<button onclick="calculate('%')">Percentage (%)</button>
<br><br>
<p id="result" class="green"></p>
</div>

<script>
function calculateVideoSize() {
var aspectRatioInput = document.getElementById("aspectRatio").value;
var ratioParts = aspectRatioInput.split(":");
var width = parseFloat(ratioParts[0]);
var height = parseFloat(ratioParts[1]);
var heightInput = prompt("Enter video width:");
var videoWidth = parseFloat(heightInput);
var videoHeight = (videoWidth * height) / width;
document.getElementById("videoSize").innerHTML = "Height: " +
videoHeight.toFixed(2) + "px";
}

function calculate(operator) {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var result;
switch(operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
case '**':
result = Math.pow(num1, num2);
break;
case '%':
result = (num1 * num2) / 100;
break;
default:
result = "Invalid operator";
}
document.getElementById("result").innerHTML = "Result: " +
result.toFixed(2);
}
</script>
</body>
</html>

You might also like