Mizutsune

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

<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>

* {
     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;
}

* {
     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;
}

На сайте пользователь может выбрать для своих записей разные иконки из базы, все иконки черно-белые и в формате png.

Пробовал иконки svg использовать со свойством fill, но один фиг не получалось сменить цвет, тк я ссылку на изображения вставляю.

<input type="file" id="file" value="Change Image">
<img class="picture" alt="demo">

const picture = document.querySelector(".picture");
const inputFile = document.querySelector("#file");

inputFile.addEventListener("change", ({ target: t }) => {
     const [file] = t.files;

     if (!file) return;

     if (!file.size) return;

     const reader = new FileReader();

     reader.onload = () => {
          picture.src = reader.result;
     };

     reader.readAsDataURL(file);
});

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

  //some code 
}

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

<svg class="svg">
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
    <path d="M0.5,0 L1,1 H0"></path>
  </clipPath>
</svg>

<div class="clipped">
  <video src="./assets/video.mp4"></video>
</div>

.svg {
     position: absolute;
     width: 0;
     height: 0;
}

.clipped {
     width: 100%;
     max-width: 500px;
     height: 350px;
     -webkit-clip-path: url(#my-clip-path);
     clip-path: url(#my-clip-path);
}

video {
        width: 100%;
        height: 100%;
        object-fit: cover;
}

<parent>
   <card></card>
   <card></card>
   <card></card>
   <card></card>
   <button></button>
</parent>

Флексы растягиваются таким образом, чтобы занять всё доступное пространство контейнера.

Почему 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");
          });
     }
});

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