Задать вопрос
  • Как сделать многостраничный сайт (онлайн-каталог)?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    На сайте могут быть представлены сотни позиций товаров, вручную верстать каждую страничку это бред, наверняка существуют какие-то оптимизированные методы для создания подобных проектов, хотел бы попросить рассказать о них, ибо я не смог найти нормальной информации по этому поводу.

    Есть, называется - cистема управления содержимым (CMS, Content Management System).
    вручную верстать каждую страничку это бред

    В большинстве CMS, Вы создаете шаблон страницы, который будет выводить "содержимое" страницы. Рекомендую сразу гребсти в сторону WordPress+WooCommerce, а когда его станет Вам не хватать (и Вы поймете, чего именно не хватает) - выберите себе более узкоспециализированный инструмент.
    Ответ написан
    2 комментария
  • Почему не работает innerHTML?

    ThunderCat
    @ThunderCat Куратор тега JavaScript
    {PHP, MySql, HTML, JS, CSS} developer
    я правильно понимаю что вы меняете innerHTML у строки, полученной из innerHTML?
    Ответ написан
    Комментировать
  • Возможно ли на собрать такой блок на css, но что бы он тянулся в зависимости от содержимого?

    Aetae
    @Aetae
    Тлен
    Просто делаешь примитивную svg-картинку бэкграундом или встроеенно и растягиваешь на весь размер блока.

    Если хочется извращений - можно псевдоэлементом с трансформацией:
    Ответ написан
    3 комментария
  • Насколько хорошо задавать стиль в html без создания класса и т.д?

    firedragon
    @firedragon
    Не джун-мидл-сеньор, а трус-балбес-бывалый.
    HTML это язык разметки
    CSS это стилевое оформление
    JS это логика

    В общем это можно сравнить с кухней.
    Смешайте мясо, пасту и соус в блендере. Возможно вам и понравится. Но лучше выложить пасту на нее мясо и полить соусом :)
    Ответ написан
    2 комментария
  • Как отфильтровать элементы li по объекту?

    0xD34F
    @0xD34F Куратор тега JavaScript
    const li = Array.prototype.filter.call(
      document.querySelector('ul').children,
      function(n) {
        return this.every(([ k, v ]) => v === n.querySelector(`.${k}`).innerText);
      },
      Object.entries(items)
    );

    или

    const li = [];
    
    COLLECT_LI:
    for (const n of document.querySelectorAll('li')) {
      for (const k in items) {
        if (Object.hasOwn(items, k) && items[k] !== n.querySelector('.' + k).textContent) {
          continue COLLECT_LI;
        }
      }
    
      li.push(n);
    }
    Ответ написан
    4 комментария
  • Как добавить всплывающее окно на сайт 1с битрикс?

    godsplan
    @godsplan
    1. Заходим на https://freelance.habr.com/
    2. Ищем исполнителя
    3. Оплачиваем заказ
    4. Получаем результат
    Ответ написан
    Комментировать
  • Как сделать вырез в блоке такой же как в макете?

    szQocks
    @szQocks
    демо

    <div>
      <span>123</span>
      <p>Какой-то текст</p>
    </div>


    body{
      background: gray;
    }
    
    div{
      margin: 50px auto;
      width: 200px;
      height: 140px;
      background: radial-gradient(40px 40px at center top, transparent 100%, red 100%);
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 20px;
    }
    
    span{
      width: 65px;
      height: 65px;
      border-radius: 50%;
      color: firebrick;
      background: aqua;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: -32px;
    }
    Ответ написан
    2 комментария
  • Как правильно сверстать перевернутый элемент?

    Aetae
    @Aetae
    Тлен
    Очевидно transform: rotate(-90deg); и какой-нить transform-origin, наиболее удобный.
    Условно так:

    Других (адекватных) вариантов собственно и нет.
    Ответ написан
    3 комментария
  • Как изменить текст цвета в зависимости от фона?

    Frontend777
    @Frontend777
    Ubuнтер, php разраб, Wordпрессер, человек
    Если вам подойдет использование js, то можно попробовать рассмотреть такой пример:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <script src="script.js"></script>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="styles.css">
      <title>Dynamic Text Color</title>
    </head>
    <body>
      <div class="container">
        <p id="content">Ваш текст.</p>
      </div>
    </body>
    </html>

    Css:
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    
    .container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white; /* Default background color */
    }
    
    .container.dark {
      background-color: black; /* Dark background color */
      color: white; /* Text color for dark background */
    }

    JS:
    const container = document.querySelector('.container');
    const content = document.getElementById('content');
    
    // Функция для определения цвета фона
    function getBackgroundColor(element) {
      const bgColor = window.getComputedStyle(element).backgroundColor;
      return bgColor;
    }
    
    // Функция для определения оптимального цвета текста
    function getTextColor(backgroundColor) {
      // Пример простой проверки на светлый или тёмный цвет фона
      const rgb = backgroundColor.match(/\d+/g);
      const brightness = (parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000;
    
      return brightness >= 128 ? 'black' : 'white';
    }
    
    // Изменение цвета текста в зависимости от цвета фона
    function updateTextColor() {
      const bgColor = getBackgroundColor(container);
      const textColor = getTextColor(bgColor);
      content.style.color = textColor;
    }
    
    // Обновляем цвет текста при загрузке и изменении размера окна
    window.addEventListener('load', updateTextColor);
    window.addEventListener('resize', updateTextColor);

    P.S Нагенерил код gpt
    Ответ написан
    7 комментариев
  • Как реализовать анимацию смещения текста кнопки?

    imko
    @imko
    Senior Scratch Developer
    Кейфреймс
    Ну примерно так на наведение уезжают вверх с середины, без наведения приезжают снизу в середину. Разве что еще чуть чуть поковыряться чтоб она при появлении не проигрывалась
    Ответ написан
    Комментировать
  • Как сделать такой слайдер?

    DanArst
    @DanArst Куратор тега JavaScript
    Гриффиндор в моде при любой погоде!
    Как вы пытались реализовать и что не получилось?
    Примеров таких слайдеров в интернете просто море. Вот например с помощью Swiper.
    Если будете использовать loop, то значение slidesPerView должно быть больше как минимум в 2 раза, чем общее количество слайдов.
    Ответ написан
    1 комментарий
  • Как нарисовать картинку в canvas?

    Aetae
    @Aetae
    Тлен
    let img = new Image()
    // создали Image, пока ничего не происходит
    
    img.src = "path/to/img.jpg"
    // установили src - пошла загрузка картинки
    
    ctx.drawImage(img, x, y);
    // нарисовали на канвасе сраное ничто
    
    // идёт загрузка картинки
    // идёт загрузка картинки
    // идёт загрузка картинки
    // идёт загрузка картинки
    // идёт загрузка картинки
    // идёт загрузка картинки
    // идёт загрузка картинки
    
    // картинка загрузилась, вызвано событие img.onload
    Ответ написан
    1 комментарий
  • Как нарисовать картинку в canvas?

    szQocks
    @szQocks
    Скорее всего ошибка в путях, либо не верно отслеживал событие.

    const canvas = document.createElement('canvas');
    canvas.width = 500;
    canvas.height = 500;
    
    const ctx = canvas.getContext('2d');
    
    document.body.append(canvas);
    
    let img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0);
    }
    img.src = "https://i.pinimg.com/originals/87/48/07/874807f8cb45e17f44312eb761261ad9.jpg";
    Ответ написан
    Комментировать
  • Почему не записываются данные в файл?

    ipatiev
    @ipatiev
    Потомок старинного рода Ипатьевых-Колотитьевых
    Как все новички, вы оперируете понятием "может быть".
    "может быть сервер не принимает". "по крайне мере должно отправлять". "насчет РНР не уверен"
    Так делать никогда не надо.
    У вас есть все возможности узнать то, что происходит на самом деле. Факты.
    Вот фактами-то и надо всегда оперировать.
    Какая вам разница, "может ли быть такое, что backend не принимает"? Может. И чем вам это знание поможет?
    Вам не нужно знать абстрактно, вам нужно знать, принял ли ваш конкретный сервер ваши конкретные данные.
    А узнать это очень просто. Если "backend не принимает", то но выдаст ошибку. Все что вам нужно - это посмотреть, что он возвращает. Глазами.
    Плюс на всякий случай проверить, настроен ли backend на вывод ошибок.

    При работе с аякс запросами надо всегда держать открытой вкладку Сеть в инструментах разработчика в браузере.
    И смотреть, во-первых, что ваш фронт отправляет, а во-вторых - что сервер отвечает. Там вообще может быть 404. Поскольку никакого конкретного адреса вы на сервере не указали.
    Плюс если ответ сервера есть, то надо смотреть его содержимое на предмет ошибок.
    Ответ написан
    Комментировать
  • Как анимировать такой фон?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Неоднородные плавные искривления никак не получится сделать в рамках CSS или SVG. Плюс волна трехмерная, поэтому изобретать что-то в 2d-канвасе будет непрактично и скорее всего сложно в плане производительности. Поэтому использование WebGL - это естественный выбор. Конкретные библиотеки/фреймворки не имеют значения, в конечном счете все такие волны сводятся к простой схеме:

    1. Берем плоскость
    2. На плоскость накладываем какую-нибудь красивую текстуру
    3. Добавляем вершин побольше
    4. В вершинном шейдере делаем какой-то генератор шума и используем значения из него чтобы двигать вершины туда-сюда в направлении, перпендикулярном плоскости
    5. Опционально там же рассчитываем нормали для освещения
    6. Играемся с коэффициентами до посинения, пока результат не начнет нравиться


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

    @historydev Куратор тега JavaScript
    Mistkerl, drück den Knopf.
    Number('123')
    parseInt('123')
    +'123'
    Ответ написан
    Комментировать
  • Как вывести сумму двух текстовых полей?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Это базовые особенности языка. Объясняются в любом учебнике.
    В джаваскрипт оператор "+" является двойственным. В зависимости от ситуации он может быть как оператором сложения (чисел), так и оператором конкатенации (склеивание строк).

    Здесь оба операнда являются строками, поэтому знак плюс будет оператором конкатенации.
    let s1 = '1';
    let s2 = '2';
    console.log(s1 + s2); // '12'


    Здесь оба операнда являются числами, поэтому знак плюс будет оператором сложения.
    let n1 = 1;
    let n2 = 2;
    console.log(n1 + n2); // 3


    Могут быть ситуации, когда один из операндов будет числом, а другой – строкой.
    В этом случае числовой операнд будет преобразован в строку
    let s1 = '1';
    let n2 = 2;
    console.log(s1 + n2); // '12'


    Когда вы получаете значения инпутов со страницы, они всегда будут строчного типа, во всех ситуациях. Поэтому, прежде чем выполнять над этими значениями математические операции, их нужно преобразовать в числа
    parseInt() - в целое число
    parseFloat() - в число с плавающей точкой
    Number() - можно еще так
    +n2 - или так (это уже своего рода хак, основанный на приведении типов)

    Number(element1.innerHTML) + Number(element2.innerHTML)


    Все подробности здесь https://learn.javascript.ru
    Ответ написан
    Комментировать
  • Если указать высоту контента аккордеона auto, то перестает работать transition. Почему?

    IvanU7n
    @IvanU7n
    nothing interesting here
    если кратко, то потому что auto не конкретное значение, а transition не умеет иначе

    computed-value (как это по-русски?) у height: a percentage or auto or the absolute length, т.е. auto остаётся auto, а не превращается в пиксели (как хотелось бы)
    Ответ написан
    Комментировать
  • Как сделать такой border-radius нестандартный?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    1 комментарий