Dev.Learn/index.html at main · pedrob21/Dev.Learn · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Dev.Learn</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="container">
    <header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
        <a href="https://www.icmc.usp.br/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/LOGO_ICMC_CMYK.png/320px-LOGO_ICMC_CMYK.png" class="icmc">
        </a>
    </header>
</div>


  <h1 id="título">
    <span id="verde">USP</span><span id="vermelho">FLIX</span>
  </h1>
    <h2 id="fs">
        <span id="verde">Filmes</span><span id="vermelho">e</span><span id="verde">séries</span>
    </h2>

  <form id="form-pesquisa" onsubmit="event.preventDefault(); Pesquisar();">
    <input id="pesquisar" placeholder="Digite o nome do Filme ou da Série" required />
    <button type="submit">Pesquisar</button>
  </form>

  <div id="resultados">
  </div>

  <h2 id="final">
    <span id="verde">Nos acompanhe</span><span id="vermelho">!</span>
  </h2>

  <h3 id="catálogo">
    Tenha acesso ao nosso catálogo pelo celular!
  </h3>

  <script>
    const options = {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxZjhlYjc5Mjg1YjAyYTEwZTcyZmIwMWZmMjU4MzQ4NCIsIm5iZiI6MTcxOTE2MjYyNi44MTM2NTIsInN1YiI6IjY2Nzg1NjI5NzZjNzg4MDZmMDU2M2FiNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.a092gdD-cc8bz2fs_iwz1tCY2tSUPcOk5gQB60YXqu4'
      }
    };

    async function Pesquisar() {
      const textoDigitado = document.getElementById('pesquisar').value;
      const url = `https://api.themoviedb.org/3/search/movie?query=${textoDigitado}&include_adult=false&language=en-US&page=1`;

      try {
        const busca = await fetch(url, options);
        const filmesInfos = await busca.json();
        console.log(filmesInfos);
        exibirFilmes(filmesInfos);
      } catch (error) {
        alert(error.message);
      }
    }

    function exibirFilmes(filmesInfos) {
      const listaFilmes = filmesInfos.results;
      const filme = listaFilmes[0];
      const filmesinfo = document.getElementById('resultados');
     filmesinfo.innerHTML = `
        <h3 id="filme-titulo">${filme.title}</h3>
        <img id="poster" src="https://image.tmdb.org/t/p/w500${filme.poster_path}" alt="${filme.title} Poster">
        <p id="filme-sinopse">${filme.overview}</p>
      `;
    }

  </script>

</body>
</html>