search

roger-melo-treinamentos / curso-de-js-roger-melo

Repositório de informações do CJRM
492 stars 172 forks source link

Dúvida sobre Filtro #3508

Closed CleitonRReis closed 2 years ago

CleitonRReis commented 2 years ago

Etapa da aula

9

Nome da aula

Buscando e filtrando to-dos - Aula 02-03

Link da aula

https://app.nutror.com/v3/curso/a977a43d31cedcb6e7d064649ddd6c5436155aaf/curso-de-javascript-roger-melo/aula/1073158

Descreva a dúvida

Fala, Roger! Blz?

Minha dúvida não é referente a aula em si, mas sim sobre um projeto que estou desenvolvendo para treinar os conhecimentos.

Estou tentando implementar um filtro nos dados que vem da API TMDB, com base na aula citada acima. O filtro acontece, contudo, quando os dados são renderizados na tela, eles acabam duplicando, triplicando e assim vai...

Pensei em anexar uma imagem com os dados renderizados em tela, mas acho que não é possível.

Minha dúvida é: O que eu posso fazer para que os dados que vem da API sejam renderizados apenas uma vez?

Desde já agradeço.

***OBS: Desculpe colocar tanto código.

Abaixo está o código desenvolvido até o momento:


<!DOCTYPE html>
<html lang="en">

<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">
  <link rel="stylesheet" href="./css/style.css">
  <title>Appflix</title>
</head>

<body>
  <!--================= Header =================-->
  <header class="header">
    <div class="logo"><a href="./index.html">AppFlix</a></div>

    <div>
      <div class="search">
        <form data-js="film-form">
          <input data-js="search" type="search" name="search" placeholder="Search film..." />
        </form>
      </div>
    </div>

    <div>
      <a href="#">
        <img class="img-profile" src="./img/profile/cr.jpeg" alt="">
      </a>
    </div>

  </header>

  <!--================= Main =================-->
  <section>
    <div class="main-film" data-js="main-film">
      <div class="banner-film">
        <a href="#">
          <img class="poster" data-js="img-film" src="" alt="" />
          <h4 class="title" data-js="title"></h4>
        </a>
      </div>
    </div>
  </section>

  <section>
    <div class="featured-movie">
      <div class="vertical">
        <div class="horizontal">
          <div class="title">The Batman</div>

          <div class="info-film">
            <div class="vote-average">
              7.9 vote average
            </div>

            <span class="span">●</span>

            <div class="year">
              2022
            </div>
          </div>

          <div class="resume">
            In his second year of fighting crime, Batman uncovers corruption in Gotham City
            that connects to his own family while facing a serial killer known as the Riddler.
          </div>

          <div class="btn">
            <a href="#" class="watch-film">► Watch</a>
            <a href="#" class="mylist-film">+ My Lyst</a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!--================= Main Films =================-->

  <section>
    <div class="banner">
      <div data-js="models">

        <img src="" alt="banner of a movie" />

        <div class="banner-img grid-6 models">
          <div class="star">
            <img class="star" src="./svg/icon-star.svg" alt="">
          </div>

          <h3 class="title-banner">
            <a data-js="title-banner" href="./pages/popular-films/index.html">Most popular films of the day</a>
          </h3>

          <p class="mt-2">
            The standard chunk of Lorem Ipsum used since the 1500s is
            reproduced below for those interested.
            Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum."
          </p>
          <img class="banner-film-most-popular" src="" alt="">
        </div>
      </div>
    </div>
  </section>

  <!--================= Main Films =================-->

  <section class="container">
    <div data-js="film-area"></div>
  </section>

  <!--================= Films Week =================-->

  <section class="container-test">
    <div>
      <img class="star" src="./svg/icon-star.svg" alt="">
    </div>

    <h3 class="most-popular-h3">Most popular films of the Week</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Ornare urna pharetra ut ac, pellentesque.
    </p>

    <div class="films container-week" data-js="films-week-dad">

      <template data-js="films-week">
        <div class="films-test thumb">
          <img data-js="img-film-week" src="" alt="">

          <div class="film-info-test">
            <h6 class="color-gray" data-js="date-film"></h6>
            <h4 class="title-film" data-js="title-film"></h4>

            <p class="mt-1" data-js="description"></p>

            <div class="my-3">
              <a href="" class="link color-primary">Ler mais</a>
            </div>
          </div>
        </div>
      </template>

    </div>
  </section>

  <!--===============Footer=====================-->
  <footer class="footer">
    <div class="footer-data">
      <p>2022 | Cleiton Reis</p>
    </div>
    <div class="footer-icons">
      <a class="icons" href="https://github.com/CleitonRReis" target="_blank"><i
          class="fa-brands fa-github-square"></i></a>
      <a class="icons" href="https://www.linkedin.com/in/cjrreis/" target="_blank"><i
          class="fa-brands fa-linkedin"></i></a>
      <a class="icons" href="https://www.facebook.com/cleiton.tavares.3/" target="_blank"><i
          class="fa-brands fa-facebook-square"></i></a>
      <a class="icons" href="https://www.instagram.com/_rodriguesreis/" target="_blank"><i
          class="fa-brands fa-instagram-square"></i></a>
    </div>
  </footer>

  <!--===============Search Film=====================-->
  <section class="search-movie-area" data-js="search-movie-area">
    <div class="search-movie-container" data-js="search-movie-container">

      <template data-js="films-searched">
        <div class="data-movie" data-js="data-movie">

          <img data-js="searched-img-movie" src="" alt="">

          <div class="searched-movie-data">

            <h6 data-js="searched-name-movie"></h6>
            <p data-js="searched-descrition-movie"></p>

          </div>
        </div>
      </template>

    </div>
  </section>

  <script src="https://kit.fontawesome.com/8c7b8af716.js" crossorigin="anonymous"></script>
  <script src="./index.js"></script>
</body>

</html>


@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap");
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.color-white {
  color: #E8EBF0;
}

.color-primary {
  color: #5390E3;
}

.color-gradient {
  background: linear-gradient(224.78deg, #5390E3 8.12%, #1357B3 92.21%);
  -webkit-text-fill-color: transparent;
}

.color-gray {
  color: #717274;
}

.color-red {
  color: #F03D3D;
}

.color-green {
  color: #0BB07B;
}

.color-yellow {
  color: #FFCE52;
}

.grid-1 {
  width: calc(8.33333% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-1 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-2 {
  width: calc(16.66667% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-2 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-3 {
  width: calc(25% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-3 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-4 {
  width: calc(33.33333% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-4 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-5 {
  width: calc(41.66667% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-5 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-6 {
  width: calc(50% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-6 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-7 {
  width: calc(58.33333% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-7 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-8 {
  width: calc(66.66667% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-8 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-9 {
  width: calc(75% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-9 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-10 {
  width: calc(83.33333% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-10 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-11 {
  width: calc(91.66667% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-11 {
    width: calc(100% - 32px);
    float: none;
  }
}

.grid-12 {
  width: calc(100% - 32px);
  margin: 16px;
  padding: 16px 0px;
  float: left;
}

@media screen and (max-width: 960px) {
  .grid-12 {
    width: calc(100% - 32px);
    float: none;
  }
}

.banner, .models-films-popular {
  display: none;
}

.hidden {
  overflow: hidden;
}

.featured-movie {
  margin-top: 30px;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-image: url("https://image.tmdb.org/t/p/original/5P8SmMzSNYikXpxil6BYzJ16611.jpg");
}

.vertical {
  width: inherit;
  height: inherit;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, #151414), color-stop(90%, transparent));
  background: linear-gradient(to top, #151414 10%, transparent 90%);
}

.horizontal {
  width: inherit;
  height: inherit;
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, #151414), color-stop(80%, transparent));
  background: linear-gradient(to right, #151414 20%, transparent 80%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 70px 0px 0px 30px;
}

span {
  position: relative;
  display: inline-block;
  margin-left: 10px;
  font-size: 20px;
}

.span {
  color: #1B69D2;
}

.info-film,
.vote-average,
.resume,
.title,
.year,
.title-banner,
.most-popular-h3 {
  font-weight: bold;
}

.vote-average,
.resume,
.title,
.year {
  margin-top: -250px;
}

.title {
  font-size: 65px;
}

.year {
  display: inline-block;
  margin-left: 10px;
}

.vote-average {
  color: #46d369;
  display: inline-block;
}

.resume {
  color: #9EA0A3;
  max-width: 30%;
  font-size: 20px;
  margin-top: 10px;
}

.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: -150px;
}

.container img {
  width: 500px;
  -webkit-transition: .3s ease;
  transition: .3s ease;
  border-radius: 4px;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}

.container img:hover {
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
}

img.star {
  width: 200px;
}

.container p {
  font-size: 20px;
  padding: 8px;
}

.title-banner a {
  color: #F7F9FC;
  padding: 10px 0px;
  text-align: center;
}

.title-banner a:hover {
  -webkit-text-decoration: solid;
          text-decoration: solid;
}

.films-popular-area {
  padding-left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  top: 110px;
}

h1 {
  margin-bottom: 12px;
}

.films-popular-area img {
  width: 220px;
  height: 330px;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  -webkit-transition: ease .3s;
  transition: ease .3s;
  border-radius: 4px;
}

.films-popular-area img:hover {
  -webkit-transform: scale(1);
          transform: scale(1);
  cursor: pointer;
}

.filmWindowArea {
  width: 100vw;
  height: 100vh;
  background: rgba(139, 134, 134, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  -webkit-transition: ease .7s;
  transition: ease .7s;
}

.filmWindowArea.active, .search-movie-area.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.pokemonWindowBody {
  max-width: 1200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 24px;
  background-color: rgba(34, 37, 43, 0.5);
  border-radius: 4px;
  -webkit-box-shadow: inset 1px 1px 5px #dee3eb, inset -1px -1px 5px #d6dbe3;
          box-shadow: inset 1px 1px 5px #dee3eb, inset -1px -1px 5px #d6dbe3;
  position: relative;
}

.pokemonWindowBody img {
  width: 750px;
  border-radius: 4px;
  -webkit-box-shadow: 0px 1px 10px #211f1f, 0px 1px 10px #1b1a1a;
          box-shadow: 0px 1px 10px #211f1f, 0px 1px 10px #1b1a1a;
  -webkit-transition: ease .3s;
  transition: ease .3s;
}

.pokemonWindowBody img:hover {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.nameFilm {
  text-align: center;
  color: #F7F9FC;
  font-weight: bold;
  margin-bottom: 32px;
  text-transform: uppercase;
  padding: 8px;
  font-size: 50px;
}

.vote-average, .year {
  margin-bottom: 12px;
}

.descriptionFilm {
  font-size: 20px;
  font-weight: bold;
  width: 75%;
  padding: 12px 0;
}

.close {
  border: 4px solid #F7F9FC;
  background-color: #1B69D2;
  width: 50px;
  height: 50px;
  font-size: 20px;
  border-radius: 50%;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #F7F9FC;
  cursor: pointer;
  padding: 10px;
  -webkit-box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.active .pokemonWindowBody {
  -webkit-animation: modal .7s;
          animation: modal .7s;
}

@-webkit-keyframes modal {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -60px, 0);
            transform: translate3d(0, -60px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

@keyframes modal {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -60px, 0);
            transform: translate3d(0, -60px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
  }
}

.container-test {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 12px;
}

.container-week {
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 12px;
  overflow: hidden;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -100px;
}

.container-week::after {
  content: '';
  display: table;
  clear: both;
}

@media screen and (max-width: 960px) {
  .container-week {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 96px 16px;
  }
}

.title-film {
  font-size: 20px;
}

.container-week {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(355px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(355px, 1fr));
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 128px 12px;
  overflow: hidden;
  margin-top: -100px;
}

.films-test {
  border: 1px solid #151B26;
}

.thumb {
  overflow: hidden;
}

.thumb img {
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

.thumb:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.film-info-test {
  padding: 8px;
}

.link {
  padding: 12px 0px;
}

.footer {
  width: 100%;
  height: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: rgba(15, 20, 31, 0.5);
  padding: 128px 24px;
  border-top: #151B26 1px solid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 380px;
}

.footer-icons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2.5px;
}

.footer-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px;
}

.fa-github-square, .fa-facebook-square, .fa-instagram-square, .fa-linkedin {
  color: #1B69D2;
  font-size: 25px;
}

.icons {
  margin-left: 5px;
}

.icons:hover {
  -webkit-transform: translate3d(0, -3px, 0);
          transform: translate3d(0, -3px, 0);
}

input:focus {
  width: 1000px;
  -webkit-transition: ease .3s;
  transition: ease .3s;
}

.search-movie-area {
  width: 100%;
  height: 100%;
  display: none;
  padding: 24px;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  top: 0px;
  left: 0px;
  -webkit-animation: modal .7s;
          animation: modal .7s;
}

.search-movie-container {
  max-width: 1200px;
  overflow: scroll;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border-radius: 4px;
  padding: 12px;
  background-color: #06090F;
  margin-top: 70px;
}

.data-movie {
  display: inherit;
  width: 100%;
  padding: 24px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 10vh;
  margin: 0 auto;
  margin-bottom: 8px;
  border-radius: 4px;
  background-color: #06090F;
  cursor: pointer;
  -webkit-transition: ease .3s;
  transition: ease .3s;
}

.data-movie:hover {
  background-color: #151B26;
}

.data-movie img {
  max-width: 90px;
  height: 90px;
  border-radius: 50%;
  margin-right: 24px;
}

.invisible {
  display: none;
}

.s-0 {
  margin: 0;
  padding: 0;
}

.mt-110 {
  margin-top: 110px;
}

@media screen and (max-width: 960px) {
  .mt-110 {
    margin-top: 0px;
  }
}

.mt-80 {
  margin-top: 88px;
}

@media screen and (max-width: 960px) {
  .mt-80 {
    margin-top: 64px;
  }
}

.ml-40 {
  margin-left: 40px;
}

@media screen and (max-width: 960px) {
  .ml-40 {
    margin-left: 4px;
  }
}

.space-220 {
  padding: 220px 24px;
}

@media screen and (max-width: 960px) {
  .space-220 {
    padding: 96px 16px;
  }
}

.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: 8px !important;
}

.m-2 {
  margin: 16px !important;
}

.m-3 {
  margin: 24px !important;
}

.m-4 {
  margin: 32px !important;
}

.m-5 {
  margin: 48px !important;
}

.m-6 {
  margin: 64px !important;
}

.m-7 {
  margin: 72px !important;
}

.m-8 {
  margin: 96px !important;
}

.m-9 {
  margin: 128px !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: 8px !important;
}

.mt-2 {
  margin-top: 16px !important;
}

.mt-3 {
  margin-top: 24px !important;
}

.mt-4 {
  margin-top: 32px !important;
}

.mt-5 {
  margin-top: 48px !important;
}

.mt-6 {
  margin-top: 64px !important;
}

.mt-7 {
  margin-top: 72px !important;
}

.mt-8 {
  margin-top: 96px !important;
}

.mt-9 {
  margin-top: 128px !important;
}

.ml-0 {
  margin-left: 0 !important;
}

.ml-1 {
  margin-left: 8px !important;
}

.ml-2 {
  margin-left: 16px !important;
}

.ml-3 {
  margin-left: 24px !important;
}

.ml-4 {
  margin-left: 32px !important;
}

.ml-5 {
  margin-left: 48px !important;
}

.ml-6 {
  margin-left: 64px !important;
}

.ml-7 {
  margin-left: 72px !important;
}

.ml-8 {
  margin-left: 96px !important;
}

.ml-9 {
  margin-left: 128px !important;
}

.mr-0 {
  margin-right: 0 !important;
}

.mr-1 {
  margin-right: 8px !important;
}

.mr-2 {
  margin-right: 16px !important;
}

.mr-3 {
  margin-right: 24px !important;
}

.mr-4 {
  margin-right: 32px !important;
}

.mr-5 {
  margin-right: 48px !important;
}

.mr-6 {
  margin-right: 64px !important;
}

.mr-7 {
  margin-right: 72px !important;
}

.mr-8 {
  margin-right: 96px !important;
}

.mr-9 {
  margin-right: 128px !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: 8px !important;
}

.mb-2 {
  margin-bottom: 16px !important;
}

.mb-3 {
  margin-bottom: 24px !important;
}

.mb-4 {
  margin-bottom: 32px !important;
}

.mb-5 {
  margin-bottom: 48px !important;
}

.mb-6 {
  margin-bottom: 64px !important;
}

.mb-7 {
  margin-bottom: 72px !important;
}

.mb-8 {
  margin-bottom: 96px !important;
}

.mb-9 {
  margin-bottom: 128px !important;
}

.mx-0 {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.mx-1 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.mx-2 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.mx-3 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.mx-4 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.mx-5 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.mx-6 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.mx-7 {
  margin-left: 72px !important;
  margin-right: 72px !important;
}

.mx-8 {
  margin-left: 96px !important;
  margin-right: 96px !important;
}

.mx-9 {
  margin-left: 128px !important;
  margin-right: 128px !important;
}

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.my-2 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.my-3 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.my-4 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.my-5 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.my-6 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.my-7 {
  margin-top: 72px !important;
  margin-bottom: 72px !important;
}

.my-8 {
  margin-top: 96px !important;
  margin-bottom: 96px !important;
}

.my-9 {
  margin-top: 128px !important;
  margin-bottom: 128px !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: 8px !important;
}

.p-2 {
  padding: 16px !important;
}

.p-3 {
  padding: 24px !important;
}

.p-4 {
  padding: 32px !important;
}

.p-5 {
  padding: 48px !important;
}

.p-6 {
  padding: 64px !important;
}

.p-7 {
  padding: 72px !important;
}

.p-8 {
  padding: 96px !important;
}

.p-9 {
  padding: 128px !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 8px !important;
}

.pt-2 {
  padding-top: 16px !important;
}

.pt-3 {
  padding-top: 24px !important;
}

.pt-4 {
  padding-top: 32px !important;
}

.pt-5 {
  padding-top: 48px !important;
}

.pt-6 {
  padding-top: 64px !important;
}

.pt-7 {
  padding-top: 72px !important;
}

.pt-8 {
  padding-top: 96px !important;
}

.pt-9 {
  padding-top: 128px !important;
}

.pl-0 {
  padding-left: 0 !important;
}

.pl-1 {
  padding-left: 8px !important;
}

.pl-2 {
  padding-left: 16px !important;
}

.pl-3 {
  padding-left: 24px !important;
}

.pl-4 {
  padding-left: 32px !important;
}

.pl-5 {
  padding-left: 48px !important;
}

.pl-6 {
  padding-left: 64px !important;
}

.pl-7 {
  padding-left: 72px !important;
}

.pl-8 {
  padding-left: 96px !important;
}

.pl-9 {
  padding-left: 128px !important;
}

.pr-0 {
  padding-right: 0 !important;
}

.pr-1 {
  padding-right: 8px !important;
}

.pr-2 {
  padding-right: 16px !important;
}

.pr-3 {
  padding-right: 24px !important;
}

.pr-4 {
  padding-right: 32px !important;
}

.pr-5 {
  padding-right: 48px !important;
}

.pr-6 {
  padding-right: 64px !important;
}

.pr-7 {
  padding-right: 72px !important;
}

.pr-8 {
  padding-right: 96px !important;
}

.pr-9 {
  padding-right: 128px !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 8px !important;
}

.pb-2 {
  padding-bottom: 16px !important;
}

.pb-3 {
  padding-bottom: 24px !important;
}

.pb-4 {
  padding-bottom: 32px !important;
}

.pb-5 {
  padding-bottom: 48px !important;
}

.pb-6 {
  padding-bottom: 64px !important;
}

.pb-7 {
  padding-bottom: 72px !important;
}

.pb-8 {
  padding-bottom: 96px !important;
}

.pb-9 {
  padding-bottom: 128px !important;
}

.px-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.px-1 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.px-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.px-3 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.px-4 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.px-5 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.px-6 {
  padding-left: 64px !important;
  padding-right: 64px !important;
}

.px-7 {
  padding-left: 72px !important;
  padding-right: 72px !important;
}

.px-8 {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.px-9 {
  padding-left: 128px !important;
  padding-right: 128px !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.py-2 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.py-3 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.py-4 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.py-5 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.py-6 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.py-7 {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.py-8 {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.py-9 {
  padding-top: 128px !important;
  padding-bottom: 128px !important;
}

.h0 {
  font-family: 'Rubik', sans-serif;
  font-size: 120px;
  line-height: 120%;
  font-weight: 500;
}

@media screen and (max-width: 960px) {
  .h0 {
    font-family: 'Rubik', sans-serif;
    font-size: 88px;
    line-height: 120%;
    font-weight: 500;
  }
}

@media screen and (max-width: 340px) {
  .h0 {
    font-family: 'Rubik', sans-serif;
    font-size: 32px;
    line-height: 120%;
    font-weight: 500;
  }
}

h1 {
  color: #D8DBE3;
  z-index: 5;
  font-family: 'Rubik', sans-serif;
  font-size: 80px;
  line-height: 100%;
  font-weight: 500;
}

@media screen and (max-width: 960px) {
  h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 56px;
    line-height: 110%;
    font-weight: 500;
  }
}

@media screen and (max-width: 340px) {
  h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 48px;
    line-height: 120%;
    font-weight: 500;
  }
}

h2 {
  color: #D8DBE3;
  font-family: 'Rubik', sans-serif;
  font-size: 64px;
  line-height: 110%;
  font-weight: 300;
}

@media screen and (max-width: 960px) {
  h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 40px;
    line-height: 120%;
    font-weight: 300;
  }
}

@media screen and (max-width: 340px) {
  h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 36px;
    line-height: 120%;
    font-weight: 300;
  }
}

h3 {
  color: #D8DBE3;
  font-family: 'Rubik', sans-serif;
  font-size: 48px;
  line-height: 120%;
  font-weight: 300;
}

@media screen and (max-width: 960px) {
  h3 {
    font-family: 'Rubik', sans-serif;
    font-size: 32px;
    line-height: 120%;
    font-weight: 300;
  }
}

@media screen and (max-width: 340px) {
  h3 {
    font-family: 'Rubik', sans-serif;
    font-size: 28px;
    line-height: 130%;
    font-weight: 300;
  }
}

h4 {
  color: #D8DBE3;
  font-family: 'Rubik', sans-serif;
  font-size: 36px;
  line-height: 120%;
  font-weight: 300;
}

@media screen and (max-width: 960px) {
  h4 {
    font-family: 'Rubik', sans-serif;
    font-size: 28px;
    line-height: 130%;
    font-weight: 300;
  }
}

@media screen and (max-width: 340px) {
  h4 {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    line-height: 140%;
    font-weight: 300;
  }
}

h5 {
  color: #D8DBE3;
  font-family: 'Rubik', sans-serif;
  font-size: 24px;
  line-height: 140%;
  font-weight: 300;
}

@media screen and (max-width: 960px) {
  h5 {
    font-family: 'Rubik', sans-serif;
    font-size: 20px;
    line-height: 140%;
    font-weight: 300;
  }
}

h6 {
  color: #D8DBE3;
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  line-height: 150%;
  font-weight: 100;
}

@media screen and (max-width: 960px) {
  h6 {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 100;
  }
}

.h7 {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  line-height: 150%;
  font-weight: 100;
}

@media screen and (max-width: 960px) {
  .h7 {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 150%;
    font-weight: 100;
  }
}

p {
  letter-spacing: 0px;
  color: #717274;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 200;
}

@media screen and (max-width: 960px) {
  p {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 200;
  }
}

@media screen and (max-width: 340px) {
  p {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 26px;
    font-weight: 200;
  }
}

.uppercase {
  text-transform: uppercase;
  letter-spacing: 2px;
}

.p1 {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
}

@media screen and (max-width: 960px) {
  .p1 {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    line-height: 30px;
    font-weight: 300;
  }
}

@media screen and (max-width: 340px) {
  .p1 {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 24px;
    font-weight: 300;
  }
}

.p2 {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 200;
}

@media screen and (max-width: 960px) {
  .p2 {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 200;
  }
}

.p3 {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 200;
}

@media screen and (max-width: 960px) {
  .p3 {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 200;
  }
}

.p4 {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 200;
}

@media screen and (max-width: 960px) {
  .p4 {
    font-family: 'Rubik', sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 200;
  }
}

.p5 {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  line-height: 20px;
  font-weight: 200;
}

@media screen and (max-width: 960px) {
  .p5 {
    font-family: 'Rubik', sans-serif;
    font-size: 13px;
    line-height: 20px;
    font-weight: 200;
  }
}

.p-title {
  font-size: 18px;
}

@media screen and (max-width: 960px) {
  .p-title {
    font-size: 16px;
  }
}

.bold {
  font-weight: bold;
  color: #D8DBE3;
}

.letter-h1 {
  color: #E8EBF0;
  letter-spacing: 1px;
  text-transform: none;
  font-family: 'Rubik', sans-serif;
  font-size: 80px;
  line-height: 100%;
  font-weight: 500;
}

@media screen and (max-width: 960px) {
  .letter-h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 56px;
    line-height: 110%;
    font-weight: 500;
  }
}

strong {
  color: #06090F;
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  line-height: 30px;
  font-weight: 200;
}

@media screen and (max-width: 960px) {
  strong {
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 200;
  }
}

b {
  color: #2B2B2C;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.h-xl {
  color: #E8EBF0;
  font-family: 'Rubik', sans-serif;
  font-size: 120px;
  line-height: 120%;
  font-weight: 500;
  font-size: 240px;
}

@media screen and (max-width: 960px) {
  .h-xl {
    font-family: 'Rubik', sans-serif;
    font-size: 88px;
    line-height: 120%;
    font-weight: 500;
    font-size: 144px;
  }
}

.h-l {
  color: #E8EBF0;
  font-family: 'Rubik', sans-serif;
  font-size: 120px;
  line-height: 120%;
  font-weight: 500;
  font-size: 144px;
}

@media screen and (max-width: 960px) {
  .h-l {
    font-family: 'Rubik', sans-serif;
    font-size: 88px;
    line-height: 120%;
    font-weight: 500;
    font-size: 96px;
  }
}

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  position: relative;
  font-family: 'Poppins', sans-serif;
  overflow-x: hidden;
  color: white;
  background-color: #06090F;
}

body::-webkit-scrollbar {
  padding-right: 2px;
  width: 8px;
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #151B26;
}

.border {
  border: 1px solid red;
}

.hidden {
  overflow: hidden;
}

.relative {
  position: relative;
}

svg, img {
  width: 100%;
}

header {
  background-color: rgba(6, 9, 15, 0.4);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  width: 100%;
  height: 80px;
  position: fixed;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-bottom: 1px solid #151B26;
  z-index: 999;
  padding: 10px;
}

a {
  text-decoration: none;
  padding: 8px 24px;
  color: #1B69D2;
  -webkit-transition: ease .3s;
  transition: ease .3s;
}

a:hover {
  opacity: 0.7;
}

.logo {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 40px;
  max-width: 64px;
  min-width: 48px;
  font-weight: bold;
}

.img-profile {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-top: 5px;
}

input {
  display: block;
  padding: 10px 12px;
  border: 0;
  background-color: #151B26;
  width: 300px;
  border-radius: 4px;
  color: #F7F9FC;
  font-size: 15px;
  outline-color: #1B69D2;
}

.btn {
  margin-top: 15px;
}

.watch-film, .mylist-film {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bold;
  display: inline-block;
  border-radius: 4px;
  padding: 8px 24px;
  margin-right: 10px;
  opacity: 1;
  -webkit-transition: .2s ease;
  transition: .2s ease;
}

.watch-film:hover, .mylist-film:hover {
  opacity: .7;
}

.watch-film {
  background-color: #E8EBF0;
  color: #151B26;
}

.mylist-film {
  background-color: #595A5C;
  color: #F7F9FC;
}

.icon {
  max-width: 64px;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

@media screen and (max-width: 960px) {
  .icon {
    max-width: 56px;
  }
}

.icon:hover {
  -webkit-transform: translate(0, -4px, 0);
          transform: translate(0, -4px, 0);
}

.icon-s {
  max-width: 36px;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

@media screen and (max-width: 960px) {
  .icon-s {
    max-width: 32px;
  }
}

.icon-s:hover {
  -webkit-transform: translate(0, -4px, 0);
          transform: translate(0, -4px, 0);
}

.icon-l {
  max-width: 120px;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

@media screen and (max-width: 960px) {
  .icon-l {
    max-width: 96px;
  }
}

.icon-xl {
  max-width: 172px;
  -webkit-transition: .5s ease;
  transition: .5s ease;
}

@media screen and (max-width: 960px) {
  .icon-xl {
    max-width: 144px;
  }
}


const APIKEY = '3942be052658547c45144d8ba9fb9009';

const endPointMostPopularDay = `https://api.themoviedb.org/3/trending/movie/day?api_key=${APIKEY}`;
const endPointMostPopularWeek = `https://api.themoviedb.org/3/trending/movie/week?api_key=${APIKEY}`;

const filterInput = document.querySelector('[data-js="search"]');
const yearOfFilm = document.querySelector('[data-js="date-film"]');
const titleFilm = document.querySelector('[data-js="title-film"]');
const searchFilmInput = document.querySelector('[data-js="search"]');
const imgFilmWeek = document.querySelector('[data-js="img-film-week"]');
const descriptionFilm = document.querySelector('[data-js="description"]');
const searchedMovie = document.querySelector('[data-js="search-movie-area"]');

const imgPoster = (size, pathImg) => `https://image.tmdb.org/t/p/${size}${pathImg}`;
const endPointDatailsFilm = id => `https://api.themoviedb.org/3/movie/${id}?api_key=${APIKEY}`;
const searchFilm = nameFilm => `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&query=${nameFilm}`;

const handleApi = async () => {
  for (let i = 0; i < 1; i++) {
    const filmArea = document.querySelector('[data-js="film-area"]');
    const filmModels = document.querySelector('[data-js="models"]').cloneNode(true);

    try {
      const response = await fetch(endPointMostPopularDay);

      if (!response.ok) {
        throw new Error('Desculpe! Não foi possíve obter os dados do filme. Tente novamente mais tarde!');
      }

      const responseData = await response.json();
      const { poster_path } = responseData.results[i]
      const imgPoster = `https://image.tmdb.org/t/p/w300${poster_path}`;

      if (poster_path === null) {
        filmModels.querySelector('img').src = 'img/take.png';
      } else {
        filmModels.querySelector('img').src = imgPoster;
      }

      filmArea.append(filmModels);
    } catch (error) {
      console.log(error);
    };
  };
};

handleApi();

const truncate = (str, limit) => {
  return str.length > limit ? `${str.substring(0, limit)}...` : str;
};

const getFilmsWeek = async () => {
  const response = await fetch(endPointMostPopularWeek);
  const responseData = await response.json();

  const filmArea = document.querySelector('[data-js="films-week-dad"]');
  const filmsWeekTemplate = document.querySelector(
    '[data-js="films-week"]'
  ).content;

  responseData.results
    .map(({ backdrop_path, release_date, title, overview }) => {
      return {
        src: imgPoster('original', backdrop_path),
        year: new Date(release_date).getFullYear(),
        title: truncate(title, 25),
        description: truncate(overview, 50)
      };
    })
    .forEach(result => {
      const clone = filmsWeekTemplate.cloneNode(true);
      const [thumb, date, title, description] = [
        '[data-js="img-film-week"]',
        '[data-js="date-film"]',
        '[data-js="title-film"]',
        '[data-js="description"]',
      ].map(selector => clone.querySelector(selector));

      thumb.src = result.src;
      date.innerHTML = result.year;
      title.innerHTML = result.title;
      description.innerHTML = result.description;

      filmArea.appendChild(clone);
    });
};

getFilmsWeek();

filterInput.addEventListener('input', async e => {
  e.preventDefault();
  const inputValue = e.target.value.trim().toLowerCase();

  if (inputValue) {
    searchedMovie.classList.add('active');

    const searchedMovieContainer = document.querySelector('[data-js="search-movie-container"]');

    try {
      const response = await fetch(searchFilm(inputValue));
      const responseData = await response.json();
      const arrayFilms = responseData.results;
      const filmSearchedTemplate = document.querySelector('[data-js="films-searched"]').content;

      arrayFilms.map(({ poster_path, title, overview }) => {
        return {
          src: imgPoster('w200', poster_path),
          title,
          description: truncate(overview, 162)
        }
      }).forEach(result => {
        const clone = filmSearchedTemplate.cloneNode(true);
        const [imgMovie, title, description] = [
          '[data-js="searched-img-movie"]',
          '[data-js="searched-name-movie"]',
          '[data-js="searched-descrition-movie"]'
        ].map(selector => clone.querySelector(selector));

        if (result.src.includes('null')) {
          imgMovie.src = 'img/take.png';
        } else {
          imgMovie.src = result.src;
        };

        title.innerHTML = result.title;
        description.innerHTML = result.description;

      searchedMovieContainer.append(clone);

      Array.from(searchedMovieContainer.children)
        .filter(movie => !movie.textContent.toLowerCase().includes(inputValue))
        .forEach(movie => movie.classList.add('invisible'));

      Array.from(searchedMovieContainer.children)
        .filter(movie => movie.textContent.toLowerCase().includes(inputValue))
        .forEach(movie => movie.classList.remove('invisible'));
    });
    } catch (error) {
      console.error(error);
    };
  };
});

searchedMovie.addEventListener('click', e => {
  if (e.target.className === 'search-movie-area active') {
    searchedMovie.classList.remove('active');
  };
});

Já tentei resolver de algumas formas, mas

@Roger-Melo

Roger-Melo commented 2 years ago

Olá @CleitonRReis!

Dá uma olhada neste vídeo.

Como vc viu, eu não encontrei comportamento inesperado na renderização dos dados. Vc pode explicar melhor qual é o problema?

Ah, se puder, suba o projeto em um repositório no GitHub e envie o link por aqui. Assim fica mais prático eu baixar a aplicação aqui e te ajudar com mais precisão =)

CleitonRReis commented 2 years ago

Bom dia, Roger! Tudo bem?

Desde já, obrigado pelo rápido retorno.

Peço desculpas, acredito que não expliquei bem onde está o problema. 😅

O problema citado, acontece quando tento pesquisar por um título de filme - The Batman, por exemplo - perceba que traz resultados, contudo, duplica/triplica...

Estou colocando uma imagem no corpo do e-mail para exemplificar melhor o problema, e também subi o código para um repo como você pediu.

Link repositório: https://github.com/CleitonRReis/appflix-js [https://opengraph.githubassets.com/80690e4489bdd6ea7ea04c70278cbd7f236b5b3726544641f3fb25cb40e44656/CleitonRReis/appflix-js]https://github.com/CleitonRReis/appflix-js GitHub - CleitonRReis/appflix-jshttps://github.com/CleitonRReis/appflix-js Contribute to CleitonRReis/appflix-js development by creating an account on GitHub. github.com

[cid:008d945c-ccf0-4d5e-8ed3-fa261703637d]

De: Roger Melo @.> Enviado: quinta-feira, 28 de abril de 2022 22:53 Para: roger-melo-treinamentos/curso-de-js-roger-melo @.> Cc: Cleiton Reis @.>; Mention @.> Assunto: Re: [roger-melo-treinamentos/curso-de-js-roger-melo] Dúvida sobre Filtro (Issue #3508)

Olá @CleitonRReishttps://github.com/CleitonRReis!

Dá uma olhada neste vídeohttps://drive.google.com/file/d/1sJc7ksjINlyCFUyZVJzZ9awaqltgmWwQ/view?usp=sharing.

Como vc viu, eu não encontrei comportamento inesperado na renderização dos dados. Vc pode explicar melhor qual é o problema?

Ah, se puder, suba o projeto em um repositório no GitHub e envie o link por aqui. Assim fica mais prático eu baixar a aplicação aqui e te ajudar com mais precisão =)

— Reply to this email directly, view it on GitHubhttps://github.com/roger-melo-treinamentos/curso-de-js-roger-melo/issues/3508#issuecomment-1112809608, or unsubscribehttps://github.com/notifications/unsubscribe-auth/APDQZINBOJISAHSNZDD5IOTVHM6JDANCNFSM5UQHWN7A. You are receiving this because you were mentioned.Message ID: @.***>

Roger-Melo commented 2 years ago

@CleitonRReis agora ficou mais claro, hahah

Antes de responder, deixa eu dar uma dica...

Quando possível, prefira acessar a issue no repositório, ao invés de acessar por email. Email não é capaz, por exemplo, de renderizar código com syntax-highlight como aqui nos comentários das issues.

Ao invés de dar a resposta pronta, vou mostrar o caminho, ok? =)

No exemplo abaixo, eu apenas inseri uma ul como primeira filha do body e deixei apenas o essencial da lógica de exibição dos filmes no js:

<body>
  <ul data-js="ul"></ul>

  <!-- ... -->
</body>
const ul = document.querySelector('[data-js="ul"]')

const showMoviesList = async e => {
  e.preventDefault()

  const inputValue = e.target.value.trim().toLowerCase()
  const response = await fetch(searchFilm(inputValue))
  const { results } = await response.json()

  const lis = results.map(result => `<li>${result.title}</li>`).join('')
  ul.innerHTML = lis
}

filterInput.addEventListener('input', showMoviesList)

Ao inserir "The Batman" no input (digitando cada caractere), as lis dos filmes não se repetiram...

image

Ao analisar o código acima, consegue dizer pq os filmes não se repetiram?

CleitonRReis commented 2 years ago

Bom dia, Roger! Tudo bem?

Muito obrigado pela ajuda. Conforme imagem em anexo, consegui passar para o código a sua ideia e acabou que deu certo.

Lhe dizer porquê de os filmes não estarem duplicando, eu não sei. Da mesma forma que não sei dizer porquê na primeira solução estavam. 😑

Se você puder esclarecer ambas as dúvidas, lhe agradeço muito. Ou seja, gostaria de saber o motivo de na solução inicial estarem duplicado/triplicando... e entender de agora, com a nova solução, não acontecer o erro.

Desde já, agradeço demais! Abs!

image

Roger-Melo commented 2 years ago

A resposta está aqui:

ul.innerHTML = lis

Na linha acima, a cada execução da função showMoviesList (executada a cada mudança de valor no input), a ul está sofrendo uma reatribuição. Isso significa que as antigas lis serão descartadas e substituídas pelas novas lis que o map gerou.

As novas lis contém o resultado da API. Esse resultado da API não vêm duplicado/triplicado. Experimente inserir um console.log(results) antes da const lis e vc irá comprovar isso.

Então, provavelmente, no seu código, o que estava duplicando os filmes é que ao invés de fazer a ul receber apenas as novas lis, as lis antigas também estavam sendo inseridas na ul.

Ficou mais claro?

@CleitonRReis

CleitonRReis commented 2 years ago

Boa tarde, Roger! Tudo bem?

Obrigado pelo retorno. Ficou claro, sim. Como sempre você ajudou muito!

Abs!

Roger-Melo commented 2 years ago

Show. No que precisar, é só abrir uma nova issue =)