Mizutsune

const container = document.querySelector('.box');

container.addEventListener("click", ({ target: t }) => {
   if(t.classList.contains("btn")) {
       const card = t.closest(".item");
       card && card.classList.add("active");
   }
})

document.querySelectorAll('.item').forEach(v => {
   v.querySelector(".btn").addEventListener('click', () => {
      v.classList.add('active');
   });
});

Не пойму в чем дело, разъясните пожалуйста.

document.querySelector('.list').addEventListener('click', (event) => {
  const target = event.target
  if (target.classList.contains('delete')) {
    const task = document.querySelector(`[data-id="${target.dataset.delete}"]`)
    // Посмотрим что будет выводиться в консоль?
    console.log(target.dataset.id)
    deleteTask(task)
  }
})

const modal = document.querySelector(".modal");
const listbox = document.querySelector(".list");
const modalCancelButton = modal.querySelector(".cancel");
const modalConfirmButton = modal.querySelector(".confirm");

let currentTaskID = null;

listbox.addEventListener("click", ({ target: t }) => {
  if (t.classList.contains("delete")) {
    currentTaskID = t.dataset.delete;
    modal.classList.remove("hidden");
  }
});

modalCancelButton.addEventListener("click", () => {
  modal.classList.add("hidden");
  currentTaskID = null;
});

modalConfirmButton.addEventListener("click", () => {
  modal.classList.add("hidden");
  deleteTask(currentTaskID);
});

const deleteTask = id => id && listbox.querySelector(`[data-id="${id}"]`).remove();

Но вылазит то один баг, то другой. Уже нервишки здают...

Есть ли хорошие конвертеры из jquery в js?

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

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

const swiper = new Swiper('.swiper', {
      breakpoints: {
        640: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 4,
        },
        1024: {
          slidesPerView: 5,
        },
      }
    });

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")
     };
});

<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"
      ]
   }
]

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();

// если ширина окна больше или равна 1200px,
// выполняем инициализацию слайдера

if(window.innerWidth >= 1200) {
   slider.init();
}

function myAwesomeFunction() {
  if(!document.querySelector("#target")) return;

  //some code 
}

if(document.querySelector("#target")) {
   myAwesomeFunction(); 
}

Почему transition не срабатывает при скрытии элемента?

- transition: opacity 0.3s;
+ transition: opacity 0.3s, visibility 0.3s;

.block {
    width: 250px;
    height: 250px;
    background: #eee;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }

  .block-active {
    opacity: 1;
    visibility: visible;
  }

function show() {
    const element = document.getElementById("block");
    element.classList.toggle("block-active");
  }

function show() {
     const element = document.getElementById("block");

     switch (Boolean(element.classList.contains("block-active"))) {
          case false:
               return element.classList.add("block-active");
          case true:
               return element.classList.remove("block-active");
     }
}

.tabs-panels__panel {
     display: none;
}

.tabs-panels__panel-active {
     display: block;
}

<div id="tabs" class="tabs">
    <div class="tabs__nav">
        <button class="tabs-nav__button tabs-nav__button-active" data-tabs-target="tabs-panel-1">
            Section 1
        </button>
        <button class="tabs-nav__button" data-tabs-target="tabs-panel-2">
            Section 2
        </button>
    </div>
    <div class="tabs__panels">
        <div id="tabs-panel-1" class="tabs-panels__panel">
            <div class="tabs-panels-panel__container">
                Content Of Section 1
            </div>
        </div>
        <div id="tabs-panel-2" class="tabs-panels__panel tabs-panels__panel-active">
            <div class="tabs-panels-panel__container">
                Content Of Section 2
            </div>
        </div>
    </div>
</div>

const container = document.querySelector("#tabs");

container.addEventListener("click", ({ target: t }) => {
     if (t.classList.contains("tabs-nav__button")) {
          const tabsTriggerButton = container.querySelectorAll(".tabs-nav__button");
          const tabsContentPanels = container.querySelectorAll(".tabs-panels__panel");

          const currentPanelID = t.dataset.tabsTarget;

          if (!currentPanelID) return;

          tabsTriggerButton.forEach(v => v.classList.remove("tabs-nav__button-active"));
          t.classList.add("tabs-nav__button-active");

          tabsContentPanels.forEach(v => {
               v.id === currentPanelID ?
                    v.classList.add("tabs-panels__panel-active") :
                    v.classList.remove("tabs-panels__panel-active");
          });
     }
});

Как от этого защититься?

document.addEventListener("click", ({ target }) => {
    if (target.classList.contains("lk-addapp-ajax-block")) {
      const value = target.querySelector("input").value;
      alert(value);
    }
  });

.lk-addapp-ajax-block  * {
        pointer-events: none;
}