Shoe-Size-Converter / index.html
5digit's picture
Update index.html
743b52d verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Конвертер размеров обуви</title>
<style>
body { font-family: Arial, sans-serif; }
.container { max-width: 600px; margin: auto; padding: 20px; }
input, select { width: 100%; margin: 10px 0; padding: 10px; }
.result { margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<h1>Конвертер размеров обуви</h1>
<input type="number" id="value" placeholder="Введите значение" />
<select id="unitFrom">
<option value="mm">Длина стопы в миллиметрах</option>
<option value="cm">Длина стопы в сантиметрах</option>
<option value="in">Длина стопы в дюймах</option>
<option value="mm_last">Длина колодки в миллиметрах</option>
<option value="cm_last">Длина колодки в сантиметрах</option>
<option value="in_last">Длина колодки в дюймах</option>
</select>
<button onclick="convert()">Перевести</button>
<div class="result" id="result"></div>
</div>
<script>
function convert() {
const value = parseFloat(document.getElementById('value').value);
const unitFrom = document.getElementById('unitFrom').value;
const resultDiv = document.getElementById('result');
if (isNaN(value)) {
resultDiv.innerHTML = "Пожалуйста, введите корректное значение.";
return;
}
// Переменные для хранения результатов
let mm, cm, inInches;
// Конвертация входного значения в миллиметры
if (unitFrom === 'mm') {
mm = value;
cm = value / 10;
inInches = value / 25.4;
} else if (unitFrom === 'cm') {
mm = value * 10;
cm = value;
inInches = value / 2.54;
} else if (unitFrom === 'in') {
mm = value * 25.4;
cm = value * 2.54;
inInches = value;
} else if (unitFrom === 'mm_last') {
mm = value;
cm = value / 10;
inInches = value / 25.4;
} else if (unitFrom === 'cm_last') {
mm = value * 10;
cm = value;
inInches = value / 2.54;
} else if (unitFrom === 'in_last') {
mm = value * 25.4;
cm = value * 2.54;
inInches = value;
}
// Формирование вывода
resultDiv.innerHTML = `
<strong>Результаты:</strong><br>
Длина стопы:<br>
${mm.toFixed(4)} мм<br>
${cm.toFixed(4)} см<br>
${inInches.toFixed(4)} дюймов<br>
<br>
Длина колодки:<br>
${mm.toFixed(4)} мм<br>
${cm.toFixed(4)} см<br>
${inInches.toFixed(4)} дюймов
`;
}
</script>
</body>
</html>