MortSith

app.ifScroll =

<router-link :to="`/Product/${item}`">{{ item }}</router-link>

<script setup>
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';

const onSwiper = (swiper) => console.log(swiper);
const onSlideChange = () => console.log('slide change');
const modules = [ Navigation, Pagination, Scrollbar, A11y ];
</script>

<style>
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/scrollbar';
</style>

<script setup>
import { directive as vClickAway } from "vue3-click-away";

const onClickInside = (event) => {
  console.log('onClickInside: ', event);
};
</script>

<section class="flex-sec">
  <button>BTN</button>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>

section {
  display: flex;
  button {
    width: 50px;
    height: 50px;
    border: solid 4px black;
    background: yellow;
  }
}
div {
  width: 200px;
  height: 200px;
  background: #00ff0b;
  margin: 10px;
}

.b1 {
  background: #fc0;
}

let cards = document.querySelectorAll(".flex-sec > div");
let button = document.querySelector(".flex-sec>button");
let firstClick = true;

button.addEventListener("click", switchColor);

function switchColor() {
  for (let i = 0; i < cards.length; i++) {
    if (firstClick) {
      if (i % 2 == 0) {
        cards[i].classList.add("b1");
      }
    } else {
      cards[i].classList.toggle("b1");
    }
  }
  firstClick = false;
}

function fb3cont() {

  b3Cont.classList.remove("__active");
}
document.onclick = function() {
  if (b3Cont.classList.contains("__active")) { fb3cont()};
}

// Выберем все инпуты и превратим NodeList в обычный массив, 
// чтобы можно было применять методы массива 
// [...] - деструктуризация
const inputs = [...document.querySelectorAll("input")]

// Определим объект с цветами "0" - если ничего не выбрано
// Остальные совпадают с value
const colors = {
  "0": "#03f3f3",
  "1": "#00ff00",
  "2": "#ccff00"
}

inputs.forEach(input => {
  // пройдемся циклом по всем инпутам
  input.addEventListener('click', () => {
    // Добавим обработчик на каждый инпут
    // inputs.some(i => i.checked) - проверка есть ли хоть один инпут cheсked
    // если нет цвет для body по ключу "0"
    // если есть по ключу input.value ("1"|"2")
    document.body.style.backgroundColor = inputs.some(i => i.checked) 
      ? colors[input.value]
      : colors["0"]
  })
})

const inputList = document.querySelectorAll("input");
inputList.forEach(input => {
  input.onclick = function() {
    if ((input.checked == true) && (input.value == "1")) {
      document.body.style.backgroundColor = "#00ff00";
    } else if ((input.checked == true) && (input.value == "2")) {
      document.body.style.backgroundColor = "#ccff00";
    } else {
      document.body.style.backgroundColor = "#03f3f3";
    }
  };
})