• Как корректно валидировать поля пароль?

    pickHabr
    @pickHabr
    Костыльных дел мастер
    Переделать функцию checkPassword, применять проверку по регулярке к каждому элементу отдельно, проверку на совпадение только при вводе подтверждения пароля

    data-passwordrepeat="Проверьте правильность пароля"


    ...
    const passwordMessage = _element.dataset.password;
    const passwordMessageRepeat = _element.dataset.passwordrepeat;
    ...
    if(passwordMessage) {
                this.checkPassword(_element, passwordMessage, successMessage);
            }
            if(passwordMessageRepeat) {
                this.checkPassword(_element, passwordMessage, successMessage);
                this.matchingPasswords(passwordMessage, successMessage);
            }
    ...
    this.checkPassword = function (_element, message, successMessage) {
            const passwordRegExp = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
            const checkPassByRegExp = passwordRegExp.test(_element.value);
    
            if (!checkPassByRegExp) {
              this.createErrorTemplate(_element, message);
            } else {
              this.createSuccessTemplate(_element, successMessage);
            }
        }
    
        this.matchingPasswords = function (message, successMessage) {
            const allPasswords = _form.querySelectorAll('input[type="password"]');
            const arrPasswordValues = Array.from(allPasswords).map(item => item.value.trim());
            const checkPassByUniqueness = new Set(arrPasswordValues).size === 1;
    
            if (!checkPassByUniqueness) {
                allPasswords.forEach((value) => this.createErrorTemplate(value, message));
            } else {
                allPasswords.forEach(value => this.createSuccessTemplate(value, successMessage));
            }
        }


    Что-то типо такого, над качеством кода сам покури

    PS оффтоп
    this.createErrorTemplate = function (_element, message) {
            const parent = _element.closest(`.${labelClass}`);
            parent.classList.add(errorClass);
            parent.classList.remove(successClass);
            parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
            parent.insertAdjacentHTML('beforeend', `<small class=${errorItemClass}>${message}</small>`);
        }
    
        this.createSuccessTemplate = function (_element, message) {
            const parent = _element.closest(`.${labelClass}`);
            if (parent) {
                parent.classList.add(successClass);
                parent.classList.remove(errorClass);
                parent.querySelectorAll(`.${errorItemClass}, .${successItemClass}`).forEach(item => item.remove());
                parent.insertAdjacentHTML('beforeend',`<small class=${successItemClass}>${message}</small>`)
            }
        }
    Ответ написан
    Комментировать
  • Как сверстать данный фон(background)?

    cyber-jet
    @cyber-jet
    Не знаю как у вас там по верстке, сделал величины относительно контейнера, лучше сделать в абсолютных величинах:
    <div class="container">
      <div class="fig"></div>
    </div>


    .container {
      position: relative;
      border: 1px solid #000;
      width: 800px; 
      height: 400px;
      overflow: hidden;
    }
    .fig {
      position: absolute;
      top: 0;
      left: -105%;
      width: 150%; 
      height: 150%;
      transform: skew(-20deg, -25deg);
      background: linear-gradient(180deg, #C91C04 0%, #4B0900 100%);
    }
    Ответ написан
    2 комментария
  • Как стилизовать данную фигуру?

    @ksnk
    Рисуешь то, что тебе нравится в редакторе, например здесь https://yqnn.github.io/svg-path-editor/
    потом получившийся path вставляешь в clip-path
    Как-нибудь так

    Тут проблема в том, что закругления будут делаться не совсем окружностями, и нужна точность в проведении линий. Но редактор довольно удобен для рисования всяких разных фигур.
    Ответ написан
    Комментировать
  • Как выровнять заголовки таблицы?

    Mike_Ro
    @Mike_Ro
    Python, JS, WordPress, SEO, Bots, Adversting
    Ячейка имеет padding (горизонтальный) до 880px по горизонтали, из за этого происходит визуальное смещение:
    .table__item {
      // ...
      @media (max-width: 880px) {
        padding: 15px;
    }

    Как вариант, добавить аналогичный padding для .table__subtitle:
    Ответ написан
    2 комментария
  • Почему не отображаются шрифты, хотя подключены?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    Ну как минимум должно быть font-family: FormulaCondensed; а не font-family: Formula Condensed; либо у подключенного шрифта надо поменять название
    Ответ написан
    9 комментариев
  • Почему стилизация select отличается в браузерах?

    sergey155
    @sergey155
    Стилизация элементов<select> и <option> с помощью CSS в некоторых аспектах ограничена. Это связано с тем, что рендеринг выпадающего списка и его пунктов (<option>) веб-браузерами в значительной степени зависит от нативного операционной системы интерфейса пользователя (OS UI). В результате многие аспекты этих элементов, такие как ширина выпадающего списка, оформление выпадающего списка, и стилизация пунктов списка, могут оказаться сложными для полного контроля с помощью обычных CSS.

    Для стилизации можете воспользоваться например select2
    Ответ написан
    Комментировать
  • Почему не получается запушить репозиторий на GitHub?

    sergey-kuznetsov
    @sergey-kuznetsov Куратор тега Git
    Автоматизатор
    Вангую, что ветка main не содержит ни одного коммита: src refspec main does not match any. Отправлять просто нечего.

    Вы, наверное, вслепую выполнили заклинания git add и git commit, но проигнорировали предупреждение, в котором говорилось, что у вас там, наверное, подмодуль в каталоге my-app и он должен отслеживаться в собственном репозитории. Команда git status должна подтвердить мою догадку.

    Разве корень проекта не должен находиться в каталоге my-app?

    Удалите ваш ещё пустой репозиторий (папку .git), который вы создали в каталоге react-code, и откройте в WebStorm каталог my-app, в котором репозиторий уже есть. Он инициализировался, когда вы делали create-react-app.

    Либо удалите папку my-app/.git и тогда сможете закоммитить каталог my-app в ваш текущий репозиторий. Предварительно попросив «забыть» про фиктивный подмодуль git rm --cached "my-app"

    А сейчас Git видит вложенный репозиторий в каталоге my-app и игнорирует всё его содержимое, думая что там у вас подмодуль.
    Ответ написан
    Комментировать
  • Как упростить код?

    Alexandroppolus
    @Alexandroppolus
    кодир
    Просто храни в переменной prev_max_quality предыдущее максимальное "качество", которое было перед добавлением в стек последнего желудя

    #include <iostream>
    #include <stack>
    using namespace std;
    
    int main() {
        int n, max_quality = 0, prev_max_quality = 0;
        stack<int> s;
        cin >> n;
    
        for (int i = 0; i < n; i++) {
            int event;
            cin >> event;
    
            if (event == 0) {
                // если извлекаем желудь, то выводим максимальное качество
                int top = s.top();
                s.pop();
                if (top == max_quality) {
                    max_quality = prev_max_quality;
                }
                cout << max_quality << endl;
            } else {
                // если нашли новый желудь, то добавляем его в стек
                prev_max_quality = max_quality;
                s.push(event);
                max_quality = max(max_quality, event);
            }
        }
    
        return 0;
    }


    и, кажется, теперь этот твой стек без надобности, можно без него обойтись
    Ответ написан
    Комментировать
  • Как в регулярном выражение указать знак пунктуации и не меньше – 8 символов?

    nedosekinstanislav
    @nedosekinstanislav
    Штирлиц как никогда был близок к провалу
    const regExp = /^(?=.*[A-Z])(?=.*\d)(?=.*[^\w\s])(?=.{8,})/;
    Ответ написан
    Комментировать
  • Почему не удаляется конкретный объект по id из массива в LocalStorage?

    yarkov
    @yarkov Куратор тега JavaScript
    Помог ответ? Отметь решением.
    const userID = event.target.closest('tr').dataset.id; // значения атрибутов ВСЕГДА строка

    Приведите к типу number и всё заработает
    Ответ написан
    Комментировать
  • Почему не выбираются элементы с помощью querySelectorAll?

    DanArst
    @DanArst Куратор тега JavaScript
    Гриффиндор в моде при любой погоде!
    Потому что эти элементы создаются динамически. Можешь написать обработчик события клика по ним например так:
    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('js--btn-delete')) {
            //тут пишешь что нужно делать по клику
        };
    });
    Ответ написан
    Комментировать
  • Почему проект React не добавляется в Git?

    sergey-kuznetsov
    @sergey-kuznetsov Куратор тега Git
    Автоматизатор
    Команда инициализации react-приложения уже инициализирует репозиторий внутри каталога weather-app. Вам не нужно было инициализировать ещё один репозиторий в вышестоящем каталоге.
    Желтый текст вам об этом и напоминает.
    Лишнюю папку .git следует удалить. Если не удаётся через терминал, то закройте WebStorm и удалите вручную через проводник. Скорее всего каталог открыт в программе, поэтому и не даёт удалить.
    Ответ написан
    Комментировать
  • Почему не выводятся данные из запроса в заголовок?

    Lapita12
    @Lapita12
    Тесты, тесты?
    function installWeather(props) {
      const request = new Promise((resolve, reject) => {
        console.log('Запрос данных на сервер...')
        fetch('https://api.openweathermap.org/data/2.5/weather?q=LVIV&units=metric&APPID=5d066958a60d315387d9492393935c19')
          .then(response => {
            if (response.ok) {
              return resolve(response.json());
            } else {
              reject('Что-то пошло нет так');
            }
          });
      });
      
      return request
        .then(data => {
          return (
            <div className='wrapper'>
              <div className='container'>
                <h1 className="place" id="place">City: {data.name}</h1>
                <p className="temp" id="temp"></p>
                <p className="pressure" id="pressure"></p>
                <p className="description" id="description"></p>
                <p className="humidity" id="humidity"></p>
                <p className="speed" id="speed"></p>
                <p className="degree" id="degree"></p>
                <img className="image" id="image" src="" alt="clouds" title="Weather"/>
              </div>
            </div>
          )
        })
    }
    
    export default installWeather;
    Ответ написан
    7 комментариев
  • Как добавить функционал в код с помощью promise и async/await?

    TemaSM
    @TemaSM
    Fullstack, DevOps, InfSec
    Чтобы реализовать функционал выбора конкретного места из списка freeSeats, можно добавить аргумент функции bookTickets, который будет принимать массив выбранных мест. Затем нужно проверить, что все места из выбранного массива находятся в списке свободных мест freeSeats. Если все места доступны, то их можно забронировать.

    Чтобы реализовать выбор формата фильма и наличия еды, можно добавить соответствующие параметры в вызов функции bookTickets. Затем можно добавить проверки на соответствие параметров формата и наличия еды заданным значениям в объекте seats. Если формат фильма или наличие еды не соответствуют требованиям, можно выкинуть ошибку.

    Вот пример, как можно изменить код с учетом этих требований:
    Раскрыть код

    async function bookTickets(date, time, numTickets, selectedSeats = [], is3D = false, hasFood = false){
      try{
        const availableSeats = await checkTicketsAvailable(date, time, numTickets);
        
        // проверка наличия выбранных мест
        const unavailableSeats = selectedSeats.filter(seat => !seats[date][time].freeSeats.includes(seat));
        if (unavailableSeats.length > 0) {
          throw new Error(`Места ${unavailableSeats.join(', ')} недоступны`);
        }
    
        // проверка формата и наличия продуктов питания
        if ((is3D && !seats[date][time].format) || (hasFood && !seats[date][time].food)) {
          throw new Error(`Невозможно забронировать билеты с выбранными параметрами`);
        }
    
        console.log(`${date} вы забронировали ${numTickets} билетов на время: ${time}`);
        if (selectedSeats.length > 0) {
          console.log(`Выбранные места: ${selectedSeats.join(', ')}`);
        }
        if (is3D) {
          console.log(`Формат фильма: 3D`);
        } else {
          console.log(`Формат фильма: 2D`);
        }
        if (hasFood) {
          console.log(`С едой`);
        } else {
          console.log(`Без еды`);
        }
      } catch (error) {
        console.error(error);
      }
    }
    
    bookTickets('2023-02-17', '15:00', 2, ['11', '21'], false, true);


    В данном примере добавлены аргументы selectedSeats, is3D и hasFood для выбора мест, формата фильма и наличия еды соответственно. Затем в функции bookTickets проверяется доступность выбранных мест и соответствие параметров формата и наличия еды требованиям. Выводится сообщение о бронировании билетов и выбранных параметрах.
    Ответ написан
    Комментировать
  • Почему данный код выдает ошибку?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Внутри скобок создаётся и тут же вызывается функция. (IIFE – immediately invoked functional expression)

    this для функции, объявленной как function определяется в момент её вызова. Если её вызывают будто она свойство объекта, этот объект будет this'ом.

    Внутри скобок function сама по себе, ни к кому не приделана, разве только к Глобальному. В данном случае window. Поэтому там this === window.

    Ну а window это не user. И там нет искомого свойства, скорее всего. Или есть, но неожиданно другое.
    Ответ написан
    Комментировать
  • Почему данный код выдает ошибку?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Потому что внутри IIFE this - window.

    https://habr.com/ru/post/149516/

    Уточнение: в strict режиме (введен в es5) this по умолчанию - undefined
    а с es6 strict режим включается автоматически если использовать в коде любую синтаксическую конструкцию из es6+
    Ответ написан
    2 комментария
  • Как получить текст тега?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Вы были близки.
    .closest() ищет исключительно вверх по дереву, начиная с самого элемента. А .text не является родительским элементом для картинки.

    Таким образом, нужно сначала найти общего родителя между картинкой и .text, и в этом общем родителе найти .text:
    -const message = event.target.closest('.text').textContent;
    + const message = event.target.closest('.message_container').querySelector('.text').textContent;
    Ответ написан
    Комментировать
  • Почему не отображается сообщение в чате?

    @historydev Куратор тега JavaScript
    Валера, настало твоё время
    Вставьте элемент, вы его не используете:
    const textParagraph = document.createElement('p');
        textParagraph.innerText = response.message;
    Ответ написан
    4 комментария
  • Почему модальное окно всплывает только при нажатие на первую кнопку?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Всплывает при нажатии на все кнопки. Но не то, которое надо, а первое. Которое видно только когда отображается первый же .product. Вместо первого .product нужен тот, внутри которого находится нажатая кнопка:

    document.querySelector('.wrapper_product') ---> event.target
    Ответ написан
    4 комментария
  • Как скрывать текущий item(li) при открытие другого item(li)?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Если прямо отвечать на спрошенное, то...
    menu.addEventListener('click', ({ target: t }) => {
      if (t.tagName === 'SPAN') {
        const parent = t.parentNode;
        parent.classList.toggle('active');
        for (const n of menu.querySelectorAll('.active')) {
          if (n !== parent) {
            n.classList.toggle('active', n.contains(parent));
          }
        }
      }
    });

    Но вообще, давайте-ка напишем чуть более универсальное решение.

    Что если количество уровней вложенности не будет ограничено числом два? Пусть скрытые элементы показываются только когда активен родитель, а не любой предок, т.е.:

    - .menu_list_item.active .submenu {
    + .active > .submenu {

    - .submenu_list_item.active .product {
    + .active > .product {

    Ну и ещё перестанем зашивать в обработчик клика селекторы и переключаемый класс, определим их отдельно, если вдруг что изменить понадобится, то достаточно будет отредактировать код всего в одном месте:

    const container = document.querySelector('#menu');
    const itemSelector = 'li';
    const buttonSelector = `${itemSelector} span`;
    const activeClass = 'active';
    
    container.addEventListener('click', function(e) {
      const item = e.target.closest(buttonSelector)?.closest(itemSelector);
      if (item) {
        item.classList.toggle(activeClass);
        this.querySelectorAll(`.${activeClass}`).forEach(n => {
          if (n !== item) {
            n.classList.toggle(activeClass, n.contains(item));
          }
        });
      }
    });
    Ответ написан
    3 комментария