Add files via upload

RaquelCCabral · Aug 1, 2023 · 8bf5118 · 8bf5118
commit 8bf5118
Show file tree

Hide file tree

Showing 13 changed files with 532 additions and 0 deletions.
diff --git a/filmes.html b/filmes.html
@@ -0,0 +1,47 @@
+<!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">
+    <title>Filmes</title>
+    <link rel="preload" href="menu.css" as="style">
+    <link rel="preload" href="menu.js" as="script">
+    <link rel = 'stylesheet' href = 'menu.css'>
+    <link rel = 'stylesheet' href = 'style.css'>
+</head>
+<body>
+    <header>
+        <img src="menu.png" id="btn_open">
+    </header>
+
+    <h1>FILMES</h1>
+
+    <div id="movie"></div>
+
+    <div id="menu" class="menu effect" style="margin-left: -250px;">
+        <nav>
+            <div style="text-align: right;">
+                <img src="menu.png" id="btn_close">
+            </div>
+            <ul>
+                <li><a href="inicio.html">Início</a></li>
+                <li><a href="filmes.html">Filmes</a></li>
+                <li><a href="series.html">Séries</a></li>
+                <li><a href="search.html">Buscar</a></li>
+            </ul>
+        </nav>
+    </div>
+
+    <div class="page" id = "pages">
+        <button class="button_page" id = "page1">1</button>
+        <button class="button_page" id = "page2">2</button>
+        <button class="button_page" id = "page3">3</button>
+        <button class="button_page" id = "page4">4</button>
+        <button class="button_page" id = "page5">5</button>
+    </div>
+
+    <script src="filmes.js"></script>
+    <script src="menu.js"></script>
+</body>
+</html>
diff --git a/filmes.js b/filmes.js
@@ -0,0 +1,54 @@
+const options = {
+    method: "GET",
+    headers: {
+        Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2ZWM3OTdkODE4ZTA5NTI0NTA4NjliYTE0ZjAzNWQyMiIsInN1YiI6IjY0OTRjMWVhMzkxYjljMDBjOTk2ZTQ0MyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.pV9CLPWyvkbpNqQjTIgXZ09d8iWynvJUegzfbE2iR3Q"
+    }
+    };
+
+  const botao = document.getElementById('pages')
+  botao?.addEventListener("click", event =>{
+    let page = event.target.id.slice(4, 5)
+    console.log(page)
+
+    let url = `https://api.themoviedb.org/3/movie/popular?language=pt-BR&page=${page}`;
+
+    fetch(url, options)
+    .then(res => res.json())
+    .then(function(data){
+        console.log(data);
+        let div = document.getElementById('movie');
+        div.innerHTML = '';
+
+        for(let i = 0; i <= data.results.length;i++){
+            if(data?.results[i]){
+                div.innerHTML += `<div><img id = 'capa' src = "http://image.tmdb.org/t/p/original${data.results[i].poster_path}" height = "320" width = "250"/>
+                              <div class = "topicos"><p>${data.results[i].original_title} (${data.results[i].title})</p>
+                              <p>${data.results[i].release_date.slice(0, 4)}</p>
+                              <p>${data.results[i].overview}</p>
+                              <p>Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}</p></div></div>`
+            }
+        }                      
+    })
+    .catch(err => console.error(err));
+
+    window.scrollTo(0, 0);
+  })
+
+  fetch("https://api.themoviedb.org/3/movie/popular?language=pt-BR&page=1", options)
+    .then(res => res.json())
+    .then(function(data){
+        console.log(data);
+        let div = document.getElementById('movie');
+        div.innerHTML = '';
+
+        for(let i = 0; i <= data.results.length;i++){
+            if(data?.results[i]){
+                div.innerHTML += `<div><img id = 'capa' src = "http://image.tmdb.org/t/p/original${data.results[i].poster_path}" height = "320" width = "250"/>
+                              <div class = "topicos"><p>${data.results[i].original_title} (${data.results[i].title})</p>
+                              <p>${data.results[i].release_date.slice(0, 4)}</p>
+                              <p>${data.results[i].overview}</p>
+                              <p>Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}</p></div></div>`
+            }
+        }                      
+    })
+    .catch(err => console.error(err));
diff --git a/inicio.html b/inicio.html
@@ -0,0 +1,39 @@
+<!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">
+    <title>Inicio</title>
+    <link rel="preload" href="menu.css" as="style">
+    <link rel="preload" href="menu.js" as="script">
+    <link rel = 'stylesheet' href = 'menu.css'>
+    <link rel = 'stylesheet' href = 'style.css'>
+</head>
+<body>
+    <header>
+        <img src="menu.png" id="btn_open">
+    </header>
+
+    <h1>LANÇAMENTOS</h1>
+
+    <div id="movie"></div>
+
+    <div id="menu" class="menu effect" style="margin-left: -250px;">
+        <nav>
+            <div style="text-align: right;">
+                <img src="menu.png" id="btn_close">
+            </div>
+            <ul>
+                <li><a href="inicio.html">Início</a></li>
+                <li><a href="filmes.html">Filmes</a></li>
+                <li><a href="series.html">Séries</a></li>
+                <li><a href="search.html">Buscar</a></li>
+            </ul>
+        </nav>
+    </div>
+
+    <script src="inicio.js"></script>
+    <script src="menu.js"></script>
+</body>
+</html>
diff --git a/inicio.js b/inicio.js
@@ -0,0 +1,34 @@
+const url = `https://api.themoviedb.org/3/trending/all/day?language=pt-BR`;
+const options = {
+method: "GET",
+headers: {
+    Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2ZWM3OTdkODE4ZTA5NTI0NTA4NjliYTE0ZjAzNWQyMiIsInN1YiI6IjY0OTRjMWVhMzkxYjljMDBjOTk2ZTQ0MyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.pV9CLPWyvkbpNqQjTIgXZ09d8iWynvJUegzfbE2iR3Q"
+}
+};
+
+fetch(url, options)
+    .then(res => res.json())
+    .then(function(data){
+        console.log(data);
+        let div = document.getElementById('movie');
+        div.innerHTML = '';
+
+        for(let i = 0; i <= data.results.length;i++){
+            if (data?.results[i]?.media_type === 'movie'){
+                div.innerHTML += `<div><img id = 'capa' src = "http://image.tmdb.org/t/p/original${data.results[i].poster_path}" height = "320" width = "250"/>
+                            <div class = "topicos"><p>${data.results[i].original_title} (${data.results[i].title})</p>
+                            <p>${data.results[i].release_date.slice(0, 4)} - Filme</p>
+                            <p>${data.results[i].overview}</p>
+                            <p>Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}</p></div></div>`
+            }
+            else if (data?.results[i]?.media_type === 'tv'){
+                div.innerHTML += `<div><img id = 'capa' src = "http://image.tmdb.org/t/p/original${data.results[i].poster_path}" height = "320" width = "250"/>
+                            <div class = "topicos"><p>${data.results[i].original_name}</p>
+                            <p>${data.results[i].first_air_date.slice(0, 4)} - Série</p>
+                            <p>${data.results[i].overview}</p>
+                            <p>Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}</p></div></div>`
+            }
+        };
+
+})
+    .catch(err => console.error(err));
diff --git a/lupa.png b/lupa.png
diff --git a/menu.css b/menu.css
@@ -0,0 +1,65 @@
+body {
+    background-color:  rgb(13, 1, 39);
+    margin: 0;
+    color: white;
+}
+
+header {
+    padding: 10px;
+    text-align: center;
+}
+
+h1{
+    text-align: center;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+}
+
+.content {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+#btn_open {
+    cursor: pointer;
+    transition: all 0.5s;
+    display: flex;
+    justify-content: left;
+}
+
+#btn_open:hover {
+    cursor: pointer;
+}
+
+#btn_close{
+    padding: 10px;
+}
+
+.menu {
+    position: fixed;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: black;
+}
+
+.menu ul {
+    list-style: none;
+}
+
+.menu ul li {
+    display: block;
+}
+
+.menu ul li a {
+    transition: background 0.3s;
+    display: block;
+    color: white;
+    font-size: 19px;
+    text-decoration: none;
+    text-transform: uppercase;
+    padding: 10px 15px;
+}
+
+.effect {
+    transition: margin 0.4s;
+}
diff --git a/menu.js b/menu.js
@@ -0,0 +1,21 @@
+let open;
+
+document.getElementById('btn_open').addEventListener('click', e => {
+    open = true;
+    menu();
+})
+
+document.getElementById('btn_close').addEventListener('click', e => {
+    open = false;
+
+    menu();
+})
+
+function menu() {
+    if (open) {
+        document.getElementById('menu').style.marginLeft = 0;
+        return;
+    }
+
+    document.getElementById('menu').style.marginLeft = '-250px';
+}
diff --git a/menu.png b/menu.png
diff --git a/search.html b/search.html
@@ -0,0 +1,42 @@
+<!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">
+    <title>Search</title>
+    <link rel="preload" href="menu.css" as="style">
+    <link rel="preload" href="menu.js" as="script">
+    <link rel = 'stylesheet' href = 'menu.css'>
+    <link rel = 'stylesheet' href = 'style.css'>
+</head>
+<body>
+    <header>
+        <img src="menu.png" id="btn_open">
+    </header>
+
+    <div class="container">
+        <input type = 'text' placeholder = "O que você busca?" id = 'search'>
+        <button id="button" onclick="search();"><img id="lupa" src="lupa.png" width="25px" height="20px"></button>
+    </div>
+
+    <div id="movie"></div>
+
+    <div id="menu" class="menu effect" style="margin-left: -250px;">
+        <nav>
+            <div style="text-align: right;">
+                <img src="menu.png" id="btn_close">
+            </div>
+            <ul>
+                <li><a href="inicio.html">Início</a></li>
+                <li><a href="filmes.html">Filmes</a></li>
+                <li><a href="series.html">Séries</a></li>
+                <li><a href="search.html">Buscar</a></li>
+            </ul>
+        </nav>
+    </div>
+
+    <script src="search.js"></script>
+    <script src="menu.js"></script>
+</body>
+</html>
diff --git a/search.js b/search.js
@@ -0,0 +1,53 @@
+const options = {
+method: "GET",
+headers: {
+    Authorization: "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI2ZWM3OTdkODE4ZTA5NTI0NTA4NjliYTE0ZjAzNWQyMiIsInN1YiI6IjY0OTRjMWVhMzkxYjljMDBjOTk2ZTQ0MyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.pV9CLPWyvkbpNqQjTIgXZ09d8iWynvJUegzfbE2iR3Q"
+}
+};
+
+function search(){
+    let string = document.getElementById('search').value;
+    queryString = string.trim().replace(/ /g, "%20");
+
+    const url = `https://api.themoviedb.org/3/search/multi?query=${queryString}&include_adult=false&language=pt-BR&page=1`;
+
+    fetch(url, options)
+    .then(res => res.json())
+    .then(function(data){
+        console.log(data);
+        let div = document.getElementById('movie');
+        div.innerHTML = '';
+
+        if(data.results.length == 0){
+            div.innerHTML = `<p class = "not_found">Nenhum resultado encontrado.</p>`
+        }
+
+        for(let i = 0; i <= data.results.length;i++){
+            if (data?.results[i]?.media_type === 'movie' && data.results[i].poster_path !== null){
+                div.innerHTML += `<div><img id = 'capa' src = "http://image.tmdb.org/t/p/original${data.results[i].poster_path}" height = "320" width = "250"/>
+                            <div class = "topicos"><p>${data.results[i].original_title} (${data.results[i].title})</p>
+                            <p>${data.results[i].release_date.slice(0, 4)} - Filme</p>
+                            <p>${data.results[i].overview}</p>
+                            <p>Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}</p></div></div>`
+            }
+            else if (data?.results[i]?.media_type === 'tv' && data.results[i].poster_path !== null){
+                div.innerHTML += `<div><img id = 'capa' src = "http://image.tmdb.org/t/p/original${data.results[i].poster_path}" height = "320" width = "250"/>
+                            <div class = "topicos"><p>${data.results[i].original_name}</p>
+                            <p>${data.results[i].first_air_date.slice(0, 4)} - Série</p>
+                            <p>${data.results[i].overview}</p>
+                            <p>Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}</p></div></div>`
+            }
+        };
+
+})
+    .catch(err => console.error(err));
+};
+
+const input = document.getElementById("search");
+input.addEventListener("keyup", (event) => {
+  if (event.key === "Enter") {
+    console.log('Enter key pressed')
+    event.preventDefault();
+    document.getElementById("button").click();
+  }
+});