• Какие блоки использовать для указанных блоков?

    Ugolnikovvv
    @Ugolnikovvv
    Junior Frontend-разработчик
    63b4722b4fa9c713549366.png
    Ответ написан
    Комментировать
  • Можно ли переделать стиль треугольника в textarea?

    iiiBird
    @iiiBird Куратор тега CSS
    Пока ты спишь - твой конкурент совершенствуется
    сделай обертку и сделай ей after абсолютом в этот угол. и раскрашивай как душе угодно
    p.s. pointer-events: none; не забудь этому after, чтобы хвататься за угол textarea, а не after
    Ответ написан
    Комментировать
  • Почему не правильно работает задача с codewars?

    gd1xza
    @gd1xza
    function isIsogram(str){
    -  str.toLowerCase();
    +  str = str.toLowerCase();
      for (let i = 0; i < str.length; i++) {
        for (let j = i + 1; j < str.length; j++) {
          if (str[i] === str[j]) {
            return false;
          }
        }  
      }
      return true;
    }
    
    console.log(isIsogram("moose")); // false
    console.log(isIsogram("moOse")); // должно быть false, получается true
    console.log(isIsogram("Dermatoglyphics")); // true
    Ответ написан
    8 комментариев
  • Как сделать красивое закрытие выдвигающегося меню?

    twobomb
    @twobomb
    Возможно нужно поменять в .btn-menu span {
    transition: all .1s linear .23s;
    на
    transition: all .1s linear;
    Ответ написан
    1 комментарий
  • Почему main все игнорирует?

    SPART4K
    @SPART4K
    Middle Front-end Developer (Vue.js/Nuxt.js)
    У вас div box не закрыт
    Советую пользоватеться IDE ( Текстовым редактором ) чтобы проще было следить за этим
    Или https://involta.ru/tools/validator-html/
    spoiler

    <html lang="ru">
        <head>
            <title>МЯСНОЙ ДАР</title>
            <meta charset="UTF-8">
    
            <link rel="preconnect" href="https://fonts.googleapis.com">
            <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
            <link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Extra+Condensed:wght@500&display=swap" rel="stylesheet">
    
            <link rel="stylesheet" href="style.css">
    
            <link rel="shortcut icon" href="images/xphoto.png" type="image/x-icon">
        </head>
    
        <body>
                <header>
                    <div class="HeaderContainer">
                        <div class="logo"> <img src="images/logo.png" alt=""> </div>
                            <a href="#" class="item photo"><img src="images/phone.png" alt="" width="45" height="45"></a>
                            <a href="#" class="item anim">КОМПАНИЯ</a>
                            <a href="#" class="item anim">ПРОДУКЦИЯ</a>
                            <a href="#" class="item anim">КЛИЕНТАМ</a>
                            <a href="#" class="item anim">КОНТАКТЫ</a>
                            <a href="#" class="item photo"><img src="images/poloski.png" alt="" width="45" height="40"></a>
                      </div>
                </header>
        
                <main>
                    <div class="container"> <!-- container начало -->
                        <div class="box">
                            <div class="slider middle"><!-- Слайдео начало -->
    
                                <div class="slides">
                    
                                    <input type="radio" name="r" id="r1" checked>
                                    <input type="radio" name="r" id="r2">
                                    <input type="radio" name="r" id="r3">
                                    <input type="radio" name="r" id="r4">
                    
                                    <div class="slide s1"><img src="images/longkolbas.png" alt></div>
                                    <div class="slide"><img src="images/kolbasa2.png" alt></div>
                                    <div class="slide"><img src="images/kolbasa3.png" alt></div>
                                    <div class="slide"><img src="images/kolbasa4.png" alt></div>
                    
                                </div>
                    
                                <div class="navigation">
                    
                                    <label for="r1" class="bar"> </label>
                                    <label for="r2" class="bar"> </label>
                                    <label for="r3" class="bar"> </label>
                                    <label for="r4" class="bar"> </label>
                                    
                                </div>
                            </div><!-- Сладйер конец -->
                        </div> <!-- вот закрытый box -->
                    </div><!-- container конец -->
                </main>
        
                <footer class="container">  
                    <a>это футер</a>
                </footer>
        </body>
    </html>

    Ответ написан
    Комментировать
  • Как сделать чтобы при нажатии на кнопку открывался только один элемент, а не все?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Предлагаю вам изучить инструменты, которые пытаетесь использовать. В смысле - откройте описание метода forEach, и разберитесь, что получает коллбек в качестве параметров. Ну а как обратиться к элементу коллекции по его индексу, вы, надеюсь, знаете.

    А вообще, если у каждой из пар кнопка-блок есть отдельный общий предок, то никаких forEach'ей не надо:

    document.addEventListener('click', ({ target }) => {
      if (target.classList.contains('класс кнопки')) {
        target
          .closest('селектор общего предка пары кнопка-блок')
          .querySelector('селектор блока')
          .classList
          .toggle('класс, показывающий блок');
      }
    });
    Ответ написан
    Комментировать
  • Как запретить уход вправо у слайдера?

    @7rows
    Frontend Разработчик / Vue / JS / TS / CSS
    btnNext.disabled = position === (itemsCount - 1);
    Как-то так, этот код отработает тогда, когда у вас последний элемент будет равен позиции
    Ответ написан
    Комментировать
  • Как сверстать этот элемент?

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



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

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

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

    KorniloFF
    @KorniloFF Куратор тега JavaScript
    Работаю по font-end / JS
    $('[data-submit]').on('submit', function (e) {
            e.preventDefault();
            // ... тут обрабатываем и валидируем
            this.form.submit();
        })
    Ответ написан
    Комментировать
  • Почему теряется высота у одного из flex блоков, если ему задать position:absolute?

    @AntowaKartowa
    Все очень просто. У тебя флекбокс ячейка остается той же высоты как ты и ожидаешь. Но рамка цветовая у тебя установлена не на флексбокс блок, а на блок который становиться абсолютным. И его размеры никак не привязаны к родительскому флексбок блоку. Достаточно просто добавить about__card min-height: 100% и все.
    Ответ написан
    Комментировать
  • Могу ли менять стили другого элемента при наведении одного элемента?

    VanDerBorsh
    @VanDerBorsh
    Люблю помогать людям, и делиться знаниями
    Полностью рабочий вариант на Javascript.
    Сохраните код как HTML и откройте в браузере.

    Читайте комментарии в коде.
    Первый вариант

    <div class="certificate">
        <div class="certificate__body">
          <h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
          <p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
          
          <!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
          <button class="btn" onmouseover="bigImage();" onmouseout="smallImage();">Подробнее</button>
        </div>
        <div class="certificate__image">
        <!-- Изображению добавлен id для обращения к нему-->
          <img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
        </div>
      </div>
    
    
      <script type="text/javascript">
    
        //Берем наше изображение по ИД
        let myImage = document.getElementById('certificate__image');
        
        //Увеличивает (запускается событием onmouseover)
        function bigImage(){
            myImage.style.width = "502px";
            myImage.style.height= "363.54px";
        };
    
        //Уменьшает  (запускается событием onmouseout)
        function smallImage(){
            myImage.style.width = "250px";
            myImage.style.height= "130px";
        };
    
      </script>




    Второй вариант, с переключением класса стиля. через
    element.classList.toggle('имя стиля');

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

    <div class="certificate">
        <div class="certificate__body">
          <h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
          <p class="certificate__text">Успешно справившись со всеми заданиями, по итогам обучения Вы получите сертификат участника.</p>
          
          <!-- В кнопку добавлены два регистратора событий указателя. (onmouseover и onmouseout)-->
          <button class="btn" onmouseover="myImage.classList.toggle('large');" onmouseout="myImage.classList.toggle('large');">Подробнее</button>
        </div>
        <div class="certificate__image">
        <!-- Изображению добавлен id для обращения к нему-->
          <img id="certificate__image" src="https://hsto.org/r/w120/webt/62/8f/43/628f43b33f1d9027652674.jpeg" alt="">
        </div>
      </div>
    
    <style>
        /* Это класс увеличивающий изображение */
        .large{
            width: 502px;
            height: 363.54px;
        }
    </style>
    
    <script type="text/javascript">
        //Берем наше изображение по ИД
        let myImage = document.getElementById('certificate__image');
    </script>

    Ответ написан
    Комментировать
  • Могу ли менять стили другого элемента при наведении одного элемента?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Чтобы сработал ваш селектор, разметка должны быть примерно такой

    <div class="certificate">
      <div class="certificate__body">
        <h2 class="certificate__title">Сертификат ученика всем, кто дойдет до конца!</h2>
        <p class="certificate__text">Успешно справившись со всеми заданиями</p>
        <button class="btn">Подробнее</button>
        <div class="certificate__image">
          <img src="./img/certificate.png" alt="">
        </div>
      </div>
      <!--<div class="certificate__image">
        <img src="./img/certificate.png" alt="">
      </div>-->
    </div>


    С текущей разметкой вам поможет только javascript. Слушайте mouseenter/mouseleave на кнопке и добавляйте/удаляйте класс на картинке.
    Ответ написан
    Комментировать
  • Не до конца правильно работает добавление текста на страницу, как исправить?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Если вам надо заменить содержимое нескольких элементов с одинаковым классом, то и выбирать надо не один элемент, а несколько. Соответственно и замену надо производить циклом.
    const today = String((new Date()).getDate()).padStart(2, '0');
    
    const dayStartElements = document.querySelectorAll(".js-text");
    dayStartElements.forEach((el) => { el.innerText = `${dd}` });
    Ответ написан
    1 комментарий
  • Почему-то не работает отправка формы, почему?

    Immortal_pony
    @Immortal_pony Куратор тега PHP
    Sendmail на сервере настроен? Если нет или не знаешь, что это такое, то явно пропиши параметры SMTP в своём php-файле

    $mail->isSMTP(); //Send using SMTP
    $mail->Host = 'smtp.example.com';  //Set the SMTP server to send through
    $mail->SMTPAuth = true;  //Enable SMTP authentication
    $mail->Username  = 'user@example.com'; //SMTP username
    $mail->Password  = 'secret';  //SMTP password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS;  //Enable implicit TLS encryption
    $mail->Port = 465; //TCP port to connect to; use 587 if you have set `SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS`


    Кстати, именно так и по умолчанию и было сделано в документации к библиотеке, который ты пользуешься, в разделе Simple Example
    Ответ написан
  • Как определить при помощи JS браузер пользователя и его ip?

    SPART4K
    @SPART4K
    Middle Front-end Developer (Vue.js/Nuxt.js)
    navigator.userAgent
    Информацию о браузере - устройствe и тп

    fetch('https://api.ipify.org/').then(
      r => r.text()
    ).then(console.log);

    ip
    Ответ написан
    Комментировать
  • Как такое сверстать а потом рендерить? Это таблица?

    Да, это таблица. Сверстать можно по разному - grid, flex, table. Как Вам больше нравится
    Ответ написан
    1 комментарий
  • Как сделать на JS чтобы скрипт срабатывал только на определенной ширине экрана?

    mizutsune
    @mizutsune
    Frontend & Backend 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, чтобы не допускать вызова функций при каждом изменении размера окна.
    Ответ написан
    Комментировать
  • Как сделать на JS чтобы скрипт срабатывал только на определенной ширине экрана?

    @pjery3
    На любом более менее адекватном слайдере есть метод инициализации и удаления слайдера. Условием window.innerWidth задавайте когда удобно
    Ответ написан
    Комментировать