Задать вопрос
VadimOswald

Вадим Освальд

Ответы пользователя по тегу HTML

  • Где можно увидеть реализацию такого эффекта при скролле?

    VadimOswald
    @VadimOswald
    Пару лет назад видел подобную идею, но с прорисовкой подписи человека по скроллу, выглядело достаточно свежо и я тогда пытался разобраться с реализацией. Прямо сходу не вспомню всех нюансов, но тебе точно нужна динамическая прорисовка SVG.
    Изучи свойства stroke-dasharray и stroke-dashoffset.
    Сначала через svg отрисовываешь нужные линии, а уже JS прорисовывает их в зависимости от процента скролла:
    const progress = Math.min(scrollPosition / (documentHeight - windowHeight), 1);
      line.style.strokeDashoffset = totalLength * (1 - progress);
    };
    Ответ написан
    Комментировать
    Комментировать

  • Взаимодействие с другими классами и блоками можно ли так?

    VadimOswald
    @VadimOswald
    Можешь попробовать работать с селектором :has(), но он может не работать на старых браузерах.
    Простой пример:
    <div class="container">
    <div class="trigger">Наведи на меня</div>
    <div class="target">Я изменюсь</div>
</div>


    .trigger {
    padding: 10px;
    background-color: lightblue;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.target {
    padding: 10px;
    background-color: lightcoral;
    transition: background-color 0.3s ease;
}

.container:has(.trigger:hover) .target {
    background-color: lightgreen;
}


    Селектор :has() проверяет, есть ли внутри родительского элемента container активный элемент с классом .trigger, на который наведен курсор. Когда блок trigger находится в состоянии hover, :has() находит это состояние в родительском контейнере, в контейнере срабатывает правило: стиль для target меняется на background-color: lightgreen.
    Еще можно юзать JS
    Ответ написан
    Комментировать
    Комментировать

  • В чём ошибка js?

    VadimOswald
    @VadimOswald
    Добрый день.
    В функции calculateBMI у вас используется document.querySelector(".height").value и document.querySelector(".weight").value для получения значений роста и веса, но поля ввода на самом деле имеют классы .input_height и .input_weight. Из-за этого высота и вес всегда остаются undefined.

    Условия проверки (height === "" || isNaN(height)) и (weight === "" || isNaN(weight)) не сработают корректно, потому что height и weight уже будут числами или NaN. Проверка height === "" бессмысленна после преобразования parseInt.

    Ну и про обратные кавычки уже упомянули, тоже акутально. 

    <div class="header">
        <h1 class="bmi_calc">Калькулятор ИМТ</h1>
        <h4>Рост</h4>
        <input class="input_height" type="text" placeholder="Введите рост (см)">
        <h4>Вес</h4>
        <input class="input_weight" type="text" placeholder="Введите вес (кг)">
        <p>
            <button class="button" type="button">Рассчитать</button>
        </p>
        <div class="result"></div>
    </div>


    window.onload = () => {
            const button = document.querySelector(".button");
            button.addEventListener("click", calculateBMI);
        }

        function calculateBMI() {
            const height = parseInt(document.querySelector(".input_height").value);
            const weight = parseInt(document.querySelector(".input_weight").value);
            const result = document.querySelector(".result");

            if (isNaN(height) || height <= 0) {
                result.innerHTML = "Укажите реальный рост";
            } else if (isNaN(weight) || weight <= 0) {
                result.innerHTML = "Укажите реальный вес";
            } else {
                const bmi = (weight / ((height * height) / 10000)).toFixed(2);

                if (bmi < 18.6) {
                    result.innerHTML = `Низкий вес: <span>${bmi}</span>`;
                } else if (bmi >= 18.6 && bmi < 24.9) {
                    result.innerHTML = `Нормальный вес: <span>${bmi}</span>`;
                } else {
                    result.innerHTML = `Избыточный вес: <span>${bmi}</span>`;
                }
            }
        }


    Я не проверял, но по идее больше косяков нет, должно работать
    Ответ написан
    Комментировать
    Комментировать