Voltar

Postado em 13 de janeiro de 2023

Snippets JavaScript

Atalhos

Accordion

HTML

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navegação por Tabs</title>
    <link rel="stylesheet" href="./css/aula18.css" />
  </head>

  <body>
    <div class="accordion active">
      <div class="title js-accordion">
        <h3>Pergunta 01</h3>
        <div class="icon">
          <img src="./img/arrow-down.png" alt="" />
        </div>
      </div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem
        optio quod minus debitis omnis minima deleniti, possimus, rerum maxime,
        itaque odio placeat voluptas fuga suscipit a praesentium nobis amet.
      </p>
    </div>

    <div class="accordion">
      <div class="title js-accordion">
        <h3>Pergunta 02</h3>
        <div class="icon">
          <img src="./img/arrow-down.png" alt="" />
        </div>
      </div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem
        optio quod minus debitis omnis minima deleniti, possimus, rerum maxime,
        itaque odio placeat voluptas fuga suscipit a praesentium nobis amet.
      </p>
    </div>

    <div class="accordion">
      <div class="title js-accordion">
        <h3>Pergunta 03</h3>
        <div class="icon">
          <img src="./img/arrow-down.png" alt="" />
        </div>
      </div>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem
        optio quod minus debitis omnis minima deleniti, possimus, rerum maxime,
        itaque odio placeat voluptas fuga suscipit a praesentium nobis amet.
      </p>
    </div>

    <script src="./js/aula18.js"></script>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Arial', sans-serif;
}

html {
  font-size: 62.5%;
}

body {
  margin: 3rem;
}

.accordion {
  border: 2px solid #000;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.accordion .title {
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color .3s;
}

.accordion .title .icon {
  width: 3rem;
  height: 3rem;
  border: 2px solid #000;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion .title .icon img {
  max-width: 12px;
  transition: transform .3s;
}

.accordion p {
  display: none;
}

.accordion:hover .title {
  background-color: #e7e7e7;
}

.accordion.active .title {
  border-bottom: 2px solid #000;
}

.accordion.active .title .icon img {
  transform: rotate(180deg);
}

.accordion.active p {
  display: block;
  padding: 1.5rem;
  font-size: 1.6rem;
  animation: fadeIn .3s forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

JS

// Aula 18 - Accordion

//------------------------------------------------------------------------------
const accordion = document.querySelectorAll(".js-accordion");

accordion.forEach((acc) => {
  acc.addEventListener("click", () => {
    accordion.forEach((item) => {
      item.parentElement.classList.remove("active");
    });

    acc.parentElement.classList.add("active");
  });
});

Inserindo classe no HTML para manipular elementos (Evento de Click)

HTML

<section class="s-filter">
  <div class="container">
    <div class="result-filter">
      <div class="result-bottom">
        <div class="cards">
          <button class="card js-open-details-pokemon">
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="s-modal" typePokemonModal="grass">
    <div class="overlay"></div>
    <div class="box">
      <button class="close js-close-details-pokemon">
        <img src="./assets/img/Modal/close.svg" alt="Close">
      </button>
    </div>
  </section>

SCSS

.s-modal {
  @include flex(row, center, center);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;

  .box {
    display: flex;
    position: relative;
    width: 100%;
    max-width: 71rem;
    height: 50.8rem;
    background-color: white;
    box-shadow: 0px 10px 40px rgba(13, 12, 71, 0.05);
    border-radius: 1.6rem;
    z-index: 1;
    transform: translateY(4rem);
    transition: transform .3s ease-in;
  }
}

.open-modal {
  .s-modal {
    opacity: 1;
    pointer-events: all;

    .box {
      transform: translateY(0);
    }
  }
}

JS

const openCardPokemon = document.querySelectorAll('.js-open-details-pokemon')
const closeCardPokemon = document.querySelectorAll('.js-close-details-pokemon')

function openDetailsPokemon() {
  document.documentElement.classList.add('open-modal')
}

function closeDetailsPokemon() {
  document.documentElement.classList.remove('open-modal')
}

openCardPokemon.forEach(card => {
  card.addEventListener('click', openDetailsPokemon)
})

closeCardPokemon.forEach(card => {
  card.addEventListener('click', closeDetailsPokemon)
})

Manipulando 3 elementos com forEach

Basta adicionar as classes, no HTML e depois estilizar no SASS, porém abaixo só tem o código JS.

 

JS

const selectCard = document.querySelectorAll('.js-open-details-pokemon')
const closeCardPokemon = document.querySelectorAll('.js-close-details-pokemon')
const openModal = document.querySelectorAll('.s-modal')
selectCard.forEach((filter, index) => {
  filter.addEventListener("click", (event) => {
    event.preventDefault();

    //Ação de Remover
    selectCard.forEach((cardActive) => {
      cardActive.classList.remove("active");
    });

    //Ação de Adicionar
    filter.classList.add("active");

    //Ação de Remover
    openModal.forEach((showModal) => {
      showModal.classList.remove("active-modal");
    });

    //Ação de Adicionar
    openModal[index].classList.add("active-modal");
  });
});

closeCardPokemon.forEach((hideModal) => {
  hideModal.addEventListener("click", (event) => {
    event.preventDefault();
    hideModal.parentElement.classList.remove("active-modal");
  });
});

Manipulando player de video

Basta adicionar as partes em destaque no seu código HTML.

HTML

<section class="s-hero">
    <video class="video-emp" src="./assets/video.mp4">
    </video>
    <div class="container">
      <div class="play">
        <button class="play-video" onclick="play()">
          <img src="./assets/img/icon/icon-play.svg" alt="">
        </button>
      </div>
    </div>
 </section>

Basta adicionar as classes, que estão no código JS, no HTML.

JS

let video = document.getElementsByClassName('video-emp')[0];
let playVideo = document.getElementsByClassName('play-video')[0];

function play() {
   video.play();
   playVideo.classList.add('sumir')
}

video.addEventListener('ended', function() {
   video.currentTime = 0;
   playVideo.classList.remove('sumir')
});