<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Калькулятор размера Стопы</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Калькулятор размера ЗИМА</h2>
        <label for="footLength">Введите длину вашей стопы в сантиметрах:</label>
        <input type="number" id="footLength" placeholder="Длина стопы" min="10" max="30" step="0.1">
        <button onclick="calculateFootSize()">Рассчитать</button>
        <p id="footSizeResult"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Montserrat, sans-serif;
    background-color: #fff;
}

.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

label {
        font-size: 14px;
    display: block;
    margin-bottom: 10px;
}

input[type="number"] {
    width: 94%;
    padding: 10px;
    margin-bottom: 20px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #26405b;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #26405b;
}

#footSizeResult {
    margin-top: 20px;
}

function calculateFootSize() {
    var footLength = parseFloat(document.getElementById('footLength').value);
    var sizes = {
        "12.5-13.0": 22,
        "13.1-13.5": 23,
        "13.6-14.2": 24,
        "14.3-14.9": 25,
        "15.0-15.6": 26,
        "15.7-16.3": 27,
        "16.4-16.9": 28,
        "17.0-17.5": 29,
        "17.6-18.2": 30,
        "18.3-18.9": 31,
        "19.0-19.6": 32,
    };

    // Проверка на минимальные и максимальные значения
    var minFootLength = parseFloat(Object.keys(sizes)[0].split('-')[0]);
    var maxFootLength = parseFloat(Object.keys(sizes)[Object.keys(sizes).length - 1].split('-')[1]);
    if (footLength < minFootLength) {
        document.getElementById('footSizeResult').innerText = "Слишком маленькая длина стопы";
        return;
    }
    if (footLength > maxFootLength) {
        document.getElementById('footSizeResult').innerText = "Слишком большая длина стопы";
        return;
    }

    var possibleSizes = [];
    var closestSizes = [];
    var distances = [];

    Object.keys(sizes).forEach(function(range) {
        var [min, max] = range.split('-').map(parseFloat);
        
        if (footLength >= min && footLength <= max) {
            possibleSizes.push(sizes[range]);
        } else {
            // Вычисляем расстояние до каждого диапазона, если значение не попало в него
            var distance = Math.min(Math.abs(footLength - min), Math.abs(footLength - max));
            distances.push({ size: sizes[range], distance: distance });
        }
    });

    // Сортируем по расстоянию и выбираем два ближайших
    distances.sort(function(a, b) {
        return a.distance - b.distance;
    });

    if (possibleSizes.length > 0) {
        document.getElementById('footSizeResult').innerText = "По вашей стопе подходят следующие размеры: " + possibleSizes.join(", ");
    } else if (distances.length >= 2) {
        closestSizes = [distances[0].size, distances[1].size];
        document.getElementById('footSizeResult').innerText = " По вашей стопе подходят следующие размеры: " + closestSizes.join(", ");
    } else {
        document.getElementById('footSizeResult').innerText = "Не найден подходящий размер.";
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.