• Как выровнять форму по центру?

    mizutsune
    @mizutsune
    Frontend Developer
    Устанавливать фиксированные значения для свойства width - не совсем корректно. Да и к тому же вы используется гриды, не совсем так как нужно.

    Немного подправил ваши стили:

    .register__inner {
         width: 100%;
    }
    
    .register__form {
         width: 100%;
         max-width: 1000px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
         grid-gap: 10px;
    }
    
    .register__input {
         width: 100%;
         height: 65px;
         border: 1px solid #d8d8d8;
         border-radius: 5px;
         padding: 27px 24px 23px;
    }
    
    .register__btn {
         width: 100%;
         height: 65px;
         border: none;
         border-radius: 5px;
         background: #ffe100;
    }


    У элемента .register__form в принципе можно установить значение grid-template-columns: repeat(2, 1fr), а потом через медиа запросы поменять, но это уже второстепенная задача.
    Ответ написан
    Комментировать
  • Как сделать такое окно загрузки фото?

    mizutsune
    @mizutsune
    Frontend Developer
    Создаём инпут для "загрузки" изображений. Стилизуем его + добавляем обработчик в котором делаем проверку на валидность загруженного файла. Если всё окей, тогда создаём блок с загруженной картинкой и вставляем его в контейнер для этих блоков. Далее пишем функцию с реализацией drag & drop or draggable или берём какую-нибудь готовую библиотеку для подобных целей. Подключаем всё и пользуемся.

    Небольшой пример:



    В примере выше обработчик загрузки изображений сильно упрощен, поэтому перед использованием думаю стоит добавить дополнительный функционал. А в качестве зависимости используется библиотека Sortable. С её помощью реализуется основная магия. Всё остальное настраивается по вкусу и цвету.
    Ответ написан
    Комментировать
  • Как расположить блоки с контентом таким образом?

    mizutsune
    @mizutsune
    Frontend Developer
    <div class="container">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>


    .container {
        display: grid;
        grid-auto-flow: column;
        grid-gap: 10px;  
        grid-template-areas: 
          "A B"
          "A C";
    }
    
    .card:nth-child(1) {
        grid-area: A;
    }
    
    .card:nth-child(2) {
        grid-area: B;
    }
    
    .card:nth-child(3) {
        grid-area: C;
    }


    Или:

    .container{
        display: grid;
        grid-gap: 10px;  
        grid-template-columns: repeat(2, 1fr);
    }
    
    .card:nth-child(1) {
        grid-row: 1 / span 2;    
    }
    Ответ написан
    Комментировать
  • В чем причина не рабочего бургер меню на GitHub?

    mizutsune
    @mizutsune
    Frontend Developer
    Добавил бургер меню на свой сайт портфолио.


    Если речь идёт об этом портфолио, то тут ошибка в этом:

    <script src="/source/js/script.js"></script>

    - <script src="/source/js/script.js"></script>
    + <script src="source/js/script.js"></script>
    Ответ написан
    1 комментарий
  • Есть сайт для оценки npm модуля?

    mizutsune
    @mizutsune
    Frontend Developer
    Не уверен что это то что нужно, но есть такой сайт openbase. При выборе какой-нибудь библиотеки/плагина/etc, выводит информацию плюс предлагает альтернативы.
    Ответ написан
    Комментировать
  • Как поменять свойства слайдера в js зависимости от размера окна?

    mizutsune
    @mizutsune
    Frontend Developer
    У Swiper хорошая и богатая документация, в которой можно найти параметр Breakpoints. Так вот, через Breakpoints можно менять многие свойства Swiper, в том числе количество отображаемых слайдов.

    Пример:

    const swiper = new Swiper('.swiper', {
          breakpoints: {
            640: {
              slidesPerView: 2,
            },
            768: {
              slidesPerView: 4,
            },
            1024: {
              slidesPerView: 5,
            },
          }
        });
    Ответ написан
  • Как сделать анимацию с кнопками?

    mizutsune
    @mizutsune
    Frontend Developer
    Как вариант можете попробовать такой плагин Vanilla-JS-Magic-Line-Navigation.

    Можно конечно и на CSS сделать, но функционал будет сильно урезан и вообще, сама реализация скорее всего будет не слишком норм.
    Ответ написан
    1 комментарий
  • Как реализовать выпадающее меню?

    mizutsune
    @mizutsune
    Frontend Developer
    Если нет опыта в создании подобных компонентов, то наверное стоит использовать какую-нибудь готовую библиотеку для аккордеонов. Например такую Accordion или такую metismenujs или поискать какие-нибудь ещё варианты. С помощью любой из этих двух библиотек, можно решить описанную в вопросе задачу.

    Или можно сделать как-то так без библиотек:

    Ответ написан
    3 комментария
  • Как сверстать этот элемент?

    mizutsune
    @mizutsune
    Frontend Developer
    В этом элементе нет ничего сложного. Карточка, внутри иконка, заголовок и текст с описанием.



    В песочнице в качестве иконок используются Inline SVG. Разумеется их лучше заменить тегами <img /> с путями до иконок, атрибутом alt и другими нужными атрибутами.
    Ответ написан
    3 комментария
  • Как выровнять картинку?

    mizutsune
    @mizutsune
    Frontend Developer
    Если правильно понял, то как-то так:

    Ответ написан
  • Как сделать принудительный перенос текста?

    mizutsune
    @mizutsune
    Frontend Developer
    Если верстка имеет примерно такой вид:

    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>


    А нужно чтобы было так:

    <p>Lorem 
    ipsum dolor sit amet consectetur adipisicing elit. </p>


    Тогда, увы, но средствами CSS такого эффекта добиться не выйдет. В CSS имеется псевдоэлемент ::first-letter для стилизации первой буквы в строке, но нет псевдоэлемента :first-word, который мог бы дать возможность стилизовать первое слово. Так что как вариант, можно обернуть первое слово в дополнительный тег, например в span через html руками или через JS. После чего станет доступна стилизация первого слова. Ну или всё таки вставить тег br в нужном месте.

    Например можно сделать как-то так:

    <p class="target">Lorem ipsum dolor sit amet consectetur adipisicing elit</p>


    const target = document.querySelector(".target");
    
    target.innerHTML = target.innerText
         .split(" ")
         .map((w, i) => (i > 0 ? w : `<span>${w}</span>`))
         .join(" ");


    .target > span:first-child {
      display: block;
    }


    В результате, все слова идущие после первого слова, будут на новой строке.
    Ответ написан
    2 комментария
  • Как разделить данные в html формате?

    mizutsune
    @mizutsune
    Frontend Developer
    function getAllNextSiblings(el, subElement, selectorFilter) {
         let collection = [];
         let target = el.nextElementSibling;
    
         while (target) {
              if (target.matches(subElement)) break;
              if (selectorFilter && !target.matches(selectorFilter)) {
                   target = target.nextElementSibling;
                   continue;
              }
              collection.push(target.textContent.trim());
              target = target.nextElementSibling;
         }
         return collection;
    }


    // собираем заголовки и параграфы в массив объектов 
    // разбивая полученные данные на группы
    [...document.querySelectorAll("h1")].map(target => {
         return {
              heading: target.textContent,
              paragraphs: getAllNextSiblings(target, "h1", "p")
         };
    });


    В итоге имея например такую HTML - разметку:

    <div class="container">
        <h1>Глава 1</h1>
        <p>Текстовой блок - 1</p>
        <p>Текстовой блок - 2</p>
        <p>Текстовой блок - 3</p>
        <p>Текстовой блок - 4</p>
    
        <h1>Глава 2</h1>
        <p>Текстовой блок - 1</p>
        <p>Текстовой блок - 2</p>
        <p>Текстовой блок - 3</p>
      </div>


    Получим такой результат:

    [
       {
          "heading": "Глава 1",
          "paragraphs": [
             "Текстовой блок - 1",
             "Текстовой блок - 2",
             "Текстовой блок - 3",
             "Текстовой блок - 4"
          ]
       },
       {
          "heading": "Глава 2",
          "paragraphs": [
             "Текстовой блок - 1",
             "Текстовой блок - 2",
             "Текстовой блок - 3"
          ]
       }
    ]
    Ответ написан
    3 комментария
  • Как реализовать вещь, которая изображена на скриншоте?

    mizutsune
    @mizutsune
    Frontend Developer
    Данный элемент обычно называется Overlay. Его предназначение заключается не только в том чтобы затемнить область вокруг модального окна или off-canvas меню для наилучшей фокусировки на элементе, но ещё и для того чтобы при клике на данный элемент можно было закрыть окно/меню.

    Однако если закрытие по клику не нужно, разумеется можно сделать и тенью и псевдоэлементами как вам подсказали в комментариях.

    Или если всё же нужно закрытие по клику, тогда вариантов несколько.

    Первый вариант:

    Оборачиваете off-canvas меню в обертку для которой устанавливаете полупрозрачный темный фон. При открытии меню, делаете обертку и меню видимыми.

    Второй вариант:

    Создаёте отдельный элемент для оверлея, задав нужный полупрозрачный темный фон. При открытии меню, делаете оверлей и меню видимыми.

    Есть ещё несколько вариантов, но эти два наиболее подходящие для решения подобных задач.

    Вот как пример библиотека onoffcanvas.
    Ответ написан
    Комментировать
  • Как убрать блок с помощью JS и добавить новый после отправки формы?

    mizutsune
    @mizutsune
    Frontend Developer
    Если кратко ответить на вопрос, то как-то так:

    1. При нажатии на кнопку Отправить, делаем валидацию полей.
    2. Если валидация прошла успешно, скрываем форму и переходим к следующему шагу.
    3. Показываем popup окно с уведомлением или добавляем активный класс скрытому блоку с уведомлением.
    4. Profit.

    Вообще обычно используется вызов popup окна для подобных уведомлений, так как оно лучше привлекает внимание пользователя и сообщает что то или иное действие прошло, например, успешно.
    Ответ написан
  • Как реализовать что-то типа оглавления с точками между текстом в две колонки?

    mizutsune
    @mizutsune
    Frontend Developer
    Можно сделать примерно так:

    Ответ написан
  • Как влияет подключение на твой сайт?

    mizutsune
    @mizutsune
    Frontend Developer
    Подключение библиотек/плагинов через CDN конечно в той или иной степени может увеличить скорость загрузки, но нужно понимать что у такого подхода есть свои подводные камни.

    На самом деле минусов может быть больше, но я выделю два основных:

    1. Неизвестно какое обновление получит та или иная внешняя библиотека, что в свою очередь может стать угрозой для безопасности.

    2. Несмотря на популярность CDN, не стоит забывать что эта сеть не является настолько мощной, чтобы пробиваться сквозь различные блокировки сайтов, интернет провайдерами.

    Приведу небольшой пример для второго пункта из списка подводных камней.

    Имеется какой-нибудь сайт, например интернет магазин. Сам сайт открывается отлично, всё работает, но на сайте через CDN подключены несколько десятков библиотек, допустим: Слайдер, Модальные окна, Аккордеоны, Тултипы и ещё 100500+ библиотек и плагинов.

    У 99% посетителей всё будет загружаться, работать отлично, но есть как минимум 1% людей у которых подключение к CDN блокируется. Получается что у этого процента посетителей сайт будет отображаться кривым и поломанным, а ещё множество функций будут недоступны. Если суть не понятна, тогда сверстайте страницу, напичкайте её компонентами, а затем просто отключите скрипты и стили. Не думаю что результат понравится вам как разработчику, а обычным пользователям тем более.

    В общем подводя итоги, хочется сказать что прежде чем слепо подключать что-то из CDN, нужно подумать, а нужно ли вам это на самом деле или нет. Ведь не все пользователи у которых криво отображается сайт из-за незагруженных стилей и скриптов, умеют и/или должны открывать консоль, читать ошибки и репортить об этом администрации.

    Можно было бы конечно привести ещё какие-нибудь примеры подводных камней, но я не особо в курсе прям всех плохих сценариев, потому что обычно подключаю библиотеки из того же хранилища, где лежат основные скрипты/стили/etc.

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

    mizutsune
    @mizutsune
    Frontend Developer
    Можно достать информацию из navigator.userAgent и регулярными выражениями разбить полученную информацию на нужные фрагменты, после чего использовать. Но такой вариант подходит если есть опыт работы с регулярными выражениями.

    Если пойти другим путем, можно вывести в консоль объект navigator и посмотреть какие свойства имеются в наличии, после чего подготовить функцию в которой будет происходить получение информации из нужных свойств объекта. Например в navigator.userAgentData хранится информация, которую можно использовать сразу, без обработки регулярными выражениями.

    Или поискать библиотеки для подобных задач и использовать их для решения своих задач. Например есть такая библиотека UAParser.js или browser-dtector или Detect.js или куча других готовых решений.

    Про получение IP - адреса, уже написали в соседних ответах.
    Ответ написан
    Комментировать
  • Как сделать на JS чтобы скрипт срабатывал только на определенной ширине экрана?

    mizutsune
    @mizutsune
    Frontend Developer
    Как вариант можно использовать window.matchMedia.

    Пример:

    const slider = new Slider();
    const breakpoint = window.matchMedia("(min-width: 1200px)");
    
    if (breakpoint.matches) {
       slider.init();
    }


    Или:

    const slider = new Slider();
    const breakpoint = window.matchMedia("(max-width: 1200px)");
    
    const breakpointChecker = () => {
       if (breakpoint.matches) {
          slider.init();
       } else {
          slider.destroy();
       }
    };
    
    breakpoint.addEventListener("change", breakpointChecker);
    breakpointChecker();


    У нормальных слайдеров имеются методы init() и destroy() или аналогичные методы для включения и отключения слайдера. Так вот, используя эти методы в связке с matchMedia(), можно добиться желаемого результата.

    Альтернативный вариант.

    Можно использовать window.innerWidth или element.clientWidth или window.outerWidth в связке с условным оператором if.

    Пример:

    // если ширина окна больше или равна 1200px,
    // выполняем инициализацию слайдера
    
    if(window.innerWidth >= 1200) {
       slider.init();
    }


    Однако данная проверка будет работать только при загрузке страницы и если нужно включать/отключать слайдер при ресайзе, то в таком случае потребуется использование обработчика с событием resize + с каким-нибудь флагом или с функцией debounce, чтобы не допускать вызова функций при каждом изменении размера окна.
    Ответ написан
    Комментировать
  • Как сделать кнопки в виде квадратиков и списка?

    mizutsune
    @mizutsune
    Frontend Developer
    Самый простой и наилучший способ - это просто добавить нужные SVG иконки в кнопки. Можно было бы конечно и бекграундами, но судя по скрину, нужно изменение цвета иконок при hover эффекте, поэтому будет лучше использовать Single Inline SVG или использовать спрайт с иконками.

    <button value="product_card_frontpage" class="grid-view">
       <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="......" />
       </svg>
    </button>


    <button value="product_card_full_width" class="list-view">
       <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="......" />
       </svg>
    </button>


    Можно и через бекграунды вставлять и менять цвет иконок, например с помощью css filter, но это на мой взгляд какое-то странное решение. Есть ещё вариант с css масками, но нужно смотреть поддержку этого свойства.

    Разумеется есть и другие варианты кроме использования Inline SVG. Например использование дополнительных html тегов для создания "иконок" или реализация с помощью градиентов/теней/псевдоэлементов/etc. Однако нужно понимать, что есть "адекватные" и "правильные" решения задач, а есть "творческие" подходы, которые не всегда и не везде уместны.

    И если реализовывать иконки с помощью CSS, то можно обойтись по одному span тегу + два псевдоэлемента на каждую иконку:

    Иконки на CSS

    <span class="icon-grid"></span>

    * {
         box-sizing: border-box;
    }
    
    .icon-grid {
         position: relative;
         display: block;
         transform: scale(5);
         height: 10px;
         width: 10px;
    }
    
    .icon-grid::after,
    .icon-grid::before {
         content: "";
         display: block;
         position: absolute;
         width: 10px;
         height: 4px;
         border-right: 4px solid red;
         border-left: 4px solid red;
         top: 0;
         left: 0;
    }
    
    .icon-grid::before {
         top: 6px;
    }


    <span class="icon-list"></span>

    * {
         box-sizing: border-box;
    }
    
    .icon-list {
         transform: scale(5);
         position: relative;
    }
    
    .icon-list,
    .icon-list::after,
    .icon-list::before {
         display: block;
         width: 20px;
         height: 2px;
         border-radius: 3px;
         background: #3f51b5;
    }
    .icon-list::after,
    .icon-list::before {
         content: "";
         position: absolute;
         top: -6px;
    }
    .icon-list::after {
         top: 6px;
    }



    Основной параметр размера иконок зависит от значения scale(<length>) в свойстве transform. Можно конечно сделать иконки и по другому(возможно даже лучше), но как пример сгодится.
    Ответ написан
    Комментировать
  • Как прикрепить меню навигации кверху при скролле?

    mizutsune
    @mizutsune
    Frontend Developer
    Переместить навигацию из элемента с классом hero в общий контейнер. Сейчас навигация находится в блоке hero и не сможет выйти за его пределы при использовании position: sticky, так как не является прямым дочерним элементом блока, внутри которого и нужна липкая навигация. Рекомендую почитать как на самом деле работает position: sticky.

    Ну и вообще, зачем у элемента .container - стоит max-height: 50px? Думаю что надо бы убрать это ограничение.
    Ответ написан