diff --git a/filmes.html b/filmes.html new file mode 100644 index 0000000..32216b1 --- /dev/null +++ b/filmes.html @@ -0,0 +1,47 @@ + + + + + + + Filmes + + + + + + +
+ +
+ +

FILMES

+ +
+ + + +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/filmes.js b/filmes.js new file mode 100644 index 0000000..edb1a60 --- /dev/null +++ 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 += `
+

${data.results[i].original_title} (${data.results[i].title})

+

${data.results[i].release_date.slice(0, 4)}

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + } + }) + .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 += `
+

${data.results[i].original_title} (${data.results[i].title})

+

${data.results[i].release_date.slice(0, 4)}

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + } + }) + .catch(err => console.error(err)); \ No newline at end of file diff --git a/inicio.html b/inicio.html new file mode 100644 index 0000000..081e99e --- /dev/null +++ b/inicio.html @@ -0,0 +1,39 @@ + + + + + + + Inicio + + + + + + +
+ +
+ +

LANÇAMENTOS

+ +
+ + + + + + + \ No newline at end of file diff --git a/inicio.js b/inicio.js new file mode 100644 index 0000000..0b93707 --- /dev/null +++ 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 += `
+

${data.results[i].original_title} (${data.results[i].title})

+

${data.results[i].release_date.slice(0, 4)} - Filme

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + else if (data?.results[i]?.media_type === 'tv'){ + div.innerHTML += `
+

${data.results[i].original_name}

+

${data.results[i].first_air_date.slice(0, 4)} - Série

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + }; + +}) + .catch(err => console.error(err)); \ No newline at end of file diff --git a/lupa.png b/lupa.png new file mode 100644 index 0000000..0e96f45 Binary files /dev/null and b/lupa.png differ diff --git a/menu.css b/menu.css new file mode 100644 index 0000000..9b5f8ff --- /dev/null +++ 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 new file mode 100644 index 0000000..0f258d7 --- /dev/null +++ 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'; +} \ No newline at end of file diff --git a/menu.png b/menu.png new file mode 100644 index 0000000..ad62c8d Binary files /dev/null and b/menu.png differ diff --git a/search.html b/search.html new file mode 100644 index 0000000..e7b28b4 --- /dev/null +++ b/search.html @@ -0,0 +1,42 @@ + + + + + + + Search + + + + + + +
+ +
+ +
+ + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/search.js b/search.js new file mode 100644 index 0000000..972f951 --- /dev/null +++ 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 = `

Nenhum resultado encontrado.

` + } + + for(let i = 0; i <= data.results.length;i++){ + if (data?.results[i]?.media_type === 'movie' && data.results[i].poster_path !== null){ + div.innerHTML += `
+

${data.results[i].original_title} (${data.results[i].title})

+

${data.results[i].release_date.slice(0, 4)} - Filme

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + else if (data?.results[i]?.media_type === 'tv' && data.results[i].poster_path !== null){ + div.innerHTML += `
+

${data.results[i].original_name}

+

${data.results[i].first_air_date.slice(0, 4)} - Série

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + }; + +}) + .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(); + } +}); \ No newline at end of file diff --git a/series.html b/series.html new file mode 100644 index 0000000..cfddf65 --- /dev/null +++ b/series.html @@ -0,0 +1,47 @@ + + + + + + + Series + + + + + + +
+ +
+ +

SÉRIES

+ +
+ + + +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/series.js b/series.js new file mode 100644 index 0000000..0113e9c --- /dev/null +++ b/series.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/tv/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 += `
+

${data.results[i].original_name} (${data.results[i].name})

+

${data.results[i].first_air_date.slice(0, 4)}

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + } + }) + .catch(err => console.error(err)); + + window.scrollTo(0, 0); + }) + + fetch("https://api.themoviedb.org/3/tv/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 += `
+

${data.results[i].original_name} (${data.results[i].name})

+

${data.results[i].first_air_date.slice(0, 4)}

+

${data.results[i].overview}

+

Popularidade: ${data.results[i].popularity} | Nota: ${data.results[i].vote_average} | Votos: ${data.results[i].vote_count}

` + } + } + }) + .catch(err => console.error(err)); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..4fbafd6 --- /dev/null +++ b/style.css @@ -0,0 +1,76 @@ +body{ + background-color: rgb(13, 1, 39); + color: white; +} + +.container{ + margin: 0 auto; + display: flex; + justify-content: center; + width: 700px; + height: 40px; + border-radius: 30px; + border: 2px solid blue; + background-color: black; + color: white; + text-align: center; +} + +#search{ + width: 700px; + font-size: 22px; + border-radius: 30px; + background-color: black; + border: transparent; + outline: transparent; + color: white; + text-align: center; +} + +#button{ + background-color: rgb(13, 1, 39); + border-radius: 30px; + border: transparent; + margin: 3px; +} + +#capa{ + float: left; + margin: 10px; +} + +p{ + font-size: 18px; + width: 80%; +} + +#movie{ + display: flex; + flex-direction: column; + justify-content: left; +} + +.topicos{ + display: flex; + flex-direction: column; + justify-content: center; +} + +.page{ + margin: 0 auto; + text-align: center; +} + +.button_page{ + background-color: rgb(13, 1, 39); + border: 2px solid blue; + color: white; + font-size: larger; +} + +.not_found{ + margin: 0 auto; + margin-top: 50px; + text-align: center; + font-size: larger; +} \ No newline at end of file