From b8bfe401dbb3218e24b49432f772375968f6d8fc Mon Sep 17 00:00:00 2001 From: Bernardo Fernandez Date: Wed, 25 Sep 2024 08:21:16 -0300 Subject: [PATCH 1/3] align text 'Please, Enter a movie name' --- style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/style.css b/style.css index 6673746..ffb4975 100644 --- a/style.css +++ b/style.css @@ -2,7 +2,7 @@ padding: 0; margin: 0; box-sizing: border-box; - font-family: "Poppins", sans-serif; + font-family: 'Poppins', sans-serif; } body { @@ -151,6 +151,7 @@ p { .msg { text-align: center; + padding-right: 50px; } @media screen and (max-width: 600px) { From b2a012d924a9848346394709e26aeb805a342171 Mon Sep 17 00:00:00 2001 From: Bernardo Fernandez Date: Wed, 25 Sep 2024 08:40:30 -0300 Subject: [PATCH 2/3] change variables name --- main.js | 148 +++++++++++++++++++++++++++----------------------------- 1 file changed, 70 insertions(+), 78 deletions(-) diff --git a/main.js b/main.js index 0c7c773..d7bc902 100644 --- a/main.js +++ b/main.js @@ -1,136 +1,128 @@ -const movieNameRef = document.getElementById("movie-name"); -const searchBtn = document.getElementById("search-btn"); -const result = document.getElementById("result"); -const suggestionsContainer = document.getElementById("suggestions"); -const key = "3cda63dc"; +const refNomeFilme = document.getElementById("movie-name"); +const btnPesquisar = document.getElementById("search-btn"); +const resultado = document.getElementById("result"); +const containerSugestoes = document.getElementById("suggestions"); +const chave = "3cda63dc"; -let debounceTimer; +let temporizadorDebounce; const cache = {}; -const searchMovies = async (searchTerm) => { - if (cache[searchTerm]) { - return cache[searchTerm]; +const pesquisarFilmes = async (termoPesquisa) => { + if (cache[termoPesquisa]) { + return cache[termoPesquisa]; } - const url = `https://www.omdbapi.com/?s=${searchTerm}&apikey=${key}`; + const url = `https://www.omdbapi.com/?s=${termoPesquisa}&apikey=${chave}`; try { - const response = await fetch(url); - const data = await response.json(); - console.log("Dados da busca:", data); // Log para depuração - cache[searchTerm] = data.Search || []; - return cache[searchTerm]; - } catch (error) { - console.error("Erro ao buscar sugestões:", error); + const resposta = await fetch(url); + const dados = await resposta.json(); + console.log("Dados da busca:", dados); // Log para depuração + cache[termoPesquisa] = dados.Search || []; + return cache[termoPesquisa]; + } catch (erro) { + console.error("Erro ao buscar sugestões:", erro); return []; } }; -const showSuggestions = (suggestions) => { - suggestionsContainer.innerHTML = ""; - if (suggestions.length > 0) { - for (const movie of suggestions) { +const mostrarSugestoes = (sugestoes) => { + containerSugestoes.innerHTML = ""; + if (sugestoes.length > 0) { + for (const filme of sugestoes) { const div = document.createElement("div"); - div.textContent = movie.Title; + div.textContent = filme.Title; div.className = "p-2 hover:bg-slate-600 cursor-pointer"; div.onclick = () => { - movieNameRef.value = movie.Title; - suggestionsContainer.classList.add("hidden"); - getMovie(); + refNomeFilme.value = filme.Title; + containerSugestoes.classList.add("hidden"); + obterFilme(); }; - suggestionsContainer.appendChild(div); + containerSugestoes.appendChild(div); } - suggestionsContainer.classList.remove("hidden"); + containerSugestoes.classList.remove("hidden"); } else { - suggestionsContainer.classList.add("hidden"); + containerSugestoes.classList.add("hidden"); } }; -const debouncedSearch = () => { - clearTimeout(debounceTimer); - debounceTimer = setTimeout(async () => { - const searchTerm = movieNameRef.value; - if (searchTerm.length > 2) { - const suggestions = await searchMovies(searchTerm); - showSuggestions(suggestions); +const pesquisaComDebounce = () => { + clearTimeout(temporizadorDebounce); + temporizadorDebounce = setTimeout(async () => { + const termoPesquisa = refNomeFilme.value; + if (termoPesquisa.length > 2) { + const sugestoes = await pesquisarFilmes(termoPesquisa); + mostrarSugestoes(sugestoes); } else { - suggestionsContainer.classList.add("hidden"); + containerSugestoes.classList.add("hidden"); } }, 300); }; -//function to fetch data from api - -const getMovie = () => { - const movieName = movieNameRef.value; - console.log("movieName", movieName); - const url = `https://www.omdbapi.com/?t=${movieName}&apikey=${key}`; // Alterado para https +// Função para buscar dados da API +const obterFilme = () => { + const nomeFilme = refNomeFilme.value; + console.log("nomeFilme", nomeFilme); + const url = `https://www.omdbapi.com/?t=${nomeFilme}&apikey=${chave}`; console.log("url", url); - //if input field is empty - if (movieName.length <= 0) { - result.innerHTML = `

Please enter a movie name

`; + // Se o campo de entrada estiver vazio + if (nomeFilme.length <= 0) { + resultado.innerHTML = `

Por favor, digite o nome de um filme

`; } - - //if input isn't empty + // Se o campo de entrada não estiver vazio else { fetch(url) .then((resp) => resp.json()) - .then((data) => { - console.log("Dados do filme:", data); // Log para depuração - //if movie exist in database - if (data.Response === "True") { - result.innerHTML = ` + .then((dados) => { + console.log("Dados do filme:", dados); // Log para depuração + // Se o filme existir no banco de dados + if (dados.Response === "True") { + resultado.innerHTML = `
- +
-

${data.Title}

+

${dados.Title}

-

${data.imdbRating}

+

${dados.imdbRating}

- ${data.Rated} - ${data.Year} - ${data.Runtime} + ${dados.Rated} + ${dados.Year} + ${dados.Runtime}
-
${data.Genre.split(",").join( +
${dados.Genre.split(",").join( "
" )}
-

Plot:

-

${data.Plot}

-

Cast:

-

${data.Actors}

+

Enredo:

+

${dados.Plot}

+

Elenco:

+

${dados.Actors}

`; } - - //if movie doesn't exist in database + // Se o filme não existir no banco de dados else { - result.innerHTML = `

${data.Error}

`; + resultado.innerHTML = `

${dados.Error}

`; } }) - //if error occurs + // Se ocorrer um erro .catch(() => { - result.innerHTML = `

Error Occured

`; + resultado.innerHTML = `

Ocorreu um erro

`; }); } }; -//console.log("movieName", movieName.length); -//if (movieName.length > 0) { -// getMovie(); -//} - -movieNameRef.addEventListener("input", debouncedSearch); -searchBtn.addEventListener("click", getMovie); -window.addEventListener("load", getMovie); +refNomeFilme.addEventListener("input", pesquisaComDebounce); +btnPesquisar.addEventListener("click", obterFilme); +window.addEventListener("load", obterFilme); // Fechar sugestões ao clicar fora document.addEventListener("click", (e) => { - if (!suggestionsContainer.contains(e.target) && e.target !== movieNameRef) { - suggestionsContainer.classList.add("hidden"); + if (!containerSugestoes.contains(e.target) && e.target !== refNomeFilme) { + containerSugestoes.classList.add("hidden"); } }); From ba8985797df880a2921f8366fe2ea6318063c87e Mon Sep 17 00:00:00 2001 From: Bernardo Fernandez Date: Wed, 25 Sep 2024 08:47:48 -0300 Subject: [PATCH 3/3] fix: not clearing 'about movie' after clearing search bar --- main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/main.js b/main.js index d7bc902..44c4c2d 100644 --- a/main.js +++ b/main.js @@ -47,6 +47,7 @@ const mostrarSugestoes = (sugestoes) => { const pesquisaComDebounce = () => { clearTimeout(temporizadorDebounce); + resultado.innerHTML = ""; // Limpa o resultado anterior temporizadorDebounce = setTimeout(async () => { const termoPesquisa = refNomeFilme.value; if (termoPesquisa.length > 2) {