Skip to content

Instantly share code, notes, and snippets.

@andreburto

andreburto/ratio.html

Created September 13, 2025 18:37
Show Gist options
  • Save andreburto/6aec052b210f0078042ba184dd9a9ac2 to your computer and use it in GitHub Desktop.
Save andreburto/6aec052b210f0078042ba184dd9a9ac2 to your computer and use it in GitHub Desktop.
Download ZIP
Sewing ratios
Raw
ratio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ratio Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 10px;
font-size: 1.5em;
}
table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
th, td {
padding: 10px;
text-align: center;
}
input[type="number"] {
width: 80px;
font-size: 1.5em;
}
input[type="button"], button {
font-size: 1em;
}
button {
padding: 10px 10px;
margin-top: 10px;
}
</style>
<script>
function calculate() {
const fitted = document.getElementById("fitted").checked;
const originalLength = parseFloat(document.getElementById("originalLength").value);
const originalWidth = parseFloat(document.getElementById("originalWidth").value);
const targetLength = parseFloat(document.getElementById("targetLength").value);
const targetWidth = parseFloat(document.getElementById("targetWidth").value);
let calculatedLength = targetLength;
let calculatedWidth = targetWidth;
if (!isNaN(targetLength) && isNaN(targetWidth)) {
calculatedWidth = (targetLength / originalLength) * originalWidth;
} else if (!isNaN(targetWidth) && isNaN(targetLength)) {
calculatedLength = (targetWidth / originalWidth) * originalLength;
}
if (!fitted) {
calculatedLength += 0.5;
calculatedWidth += 0.5;
}
document.getElementById("targetLength").value = calculatedLength.toFixed(2);
document.getElementById("targetWidth").value = calculatedWidth.toFixed(2);
}
function clearFields() {
document.getElementById("originalLength").value = '';
document.getElementById("originalWidth").value = '';
document.getElementById("targetLength").value = '';
document.getElementById("targetWidth").value = '';
}
</script>
</head>
<body>
<h1>Ratio Calculator</h1>
<table border="1">
<tr>
<th></th>
<th>Length</th>
<th>Width</th>
</tr>
<tr>
<td>Original</td>
<td><input type="number" id="originalLength" step="0.01" required></td>
<td><input type="number" id="originalWidth" step="0.01" required></td>
</tr>
<tr>
<td>Target</td>
<td><input type="number" id="targetLength" step="0.01"></td>
<td><input type="number" id="targetWidth" step="0.01"></td>
</tr>
<tr>
<td></td>
<td>
<label>
<input type="radio" id="fitted" name="fit" value="fitted" checked>
Fitted
</label>
</td>
<td>
<label>
<input type="radio" id="unfitted" name="fit" value="unfitted">
Unfitted
</label>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<button onclick="calculate()">Calculate</button>
&nbsp;
<button onclick="clearFields()">Clear</button>
</td>
</tr>
</table>
<div style="text-align: center; margin-top: 20px; font-size: .8em;">
<ol type="1" style="text-align: left; display: inline-block; margin-top: 10px;">
<li>Enter the original length and width.</li>
<li>Enter either the target length or target width.</li>
<li>Select whether the target is fitted or unfitted.</li>
<li>Click "Calculate" to compute the missing dimension.</li>
<li>Click "Clear" to reset all fields to start over.</li>
</ol>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment