<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.9-13.4": 22,
"13.5-14.2": 23,
"14.3-15.2": 24,
"15.3-15.4": 25,
        "15.5-16": 26,
        "16.1-16.8": 27,
        "16.9-17.5": 28,
        "17.6-18.2": 29,
        "18.3-18.9": 30,
        "19-19.5": 31,
        "19.6-20": 32,
         "20.1-20.7": 33,
        "20.8-21.4": 34,
        "21.5-22.0": 35,
     "22.1-22.9": 36,
    };

    // Проверка на минимальные и максимальные значения
    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 = [];
    Object.keys(sizes).forEach(function(range) {
        var [min, max] = range.split('-').map(parseFloat);
        if (footLength >= min && footLength <= max) {
            possibleSizes.push(sizes[range]);
        }
    });

    if (possibleSizes.length > 0) {
        document.getElementById('footSizeResult').innerText = "По вашей стопе подходят следующие размеры: " + possibleSizes.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.