iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Ei, crianças inocentes e cinéfilas! Quem aí gosta de assistir filmes? Tenho um desafio incrível para vocês! O desafio é criar um Movie App usando as tecnologias do HTML, CSS e JS. Isso mesmo, vamos criar um site para vocês pesquisarem seus filmes favoritos!

Mas atenção, para que vocês consigam obter as informações dos filmes, é necessário utilizar APIs. Então, anotem esses endereços de API que serão muito úteis:

const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query="'
Com esses links, vocês conseguirão baixar imagens e descrições dos filmes.

Agora, sobre a aparência do seu site, vocês podem soltar a criatividade e criar um design incrível.

Código HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Movie App</title>
  </head>
  <body>
    <header>
      <form id="form">
        <input type="text" id="search" class="search" placeholder="Search">
      </form>
    </header>

    <main id="main"></main>

    <script src="script.js"></script>
  </body>
</html>

Exemplo

https://user-images.githubusercontent.com/30157522/224490592-0887691d-c9a9-4761-8a5e-d609b36f69f2.mp4

Additional tips

Se precisarem de algumas dicas de comandos de CSS e JS que podem ajudá-los no desenvolvimento, aqui estão algumas sugestões:

Para criar um layout responsivo, utilizem o conceito de grid e flexbox do CSS. Para criar animações e transições de elementos, utilizem as propriedades CSS como transition, transform e animation. Para interagir com a API e exibir as informações dos filmes, utilizem comandos AJAX do JS e trabalhem com objetos JSON. Agora é hora de colocar a mão na massa e criar o seu próprio Movie App! Divirtam-se e boa sorte, crianças!

apauloenzo commented 1 year ago

app de filme.zip Equipe: Flasco

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_home_202112130027@ifto local_%C3%81rea%20de%20Trabalho_Movie%20App_index html

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Movie App</title>
  </head>
  <body>
    <header>
      <form id="form">
        <input type="text" id="search" class="search" placeholder="Search">
      </form>
    </header>

    <main id="main">

    </main>

    <script src="script.js"></script>
  </body>
</html>

CSS

*{
    margin: 0px;
    padding: 0px;
}

body{
    font-family: Arial;
    font-size: 18px;
}

header{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    background-color: rgb(56, 56, 56);
    padding: 20px;
}

#search {
    width: 200px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 5px;
    font-size: 14px;
    background: #f1f1f1;
    border: 1px solid #e9e9e9;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    transition: 0.2s all;
    outline: none;
    margin-left: 0;
    font-family: sans-serif;
  }

  #search:focus {
    width: 250px;
    box-shadow: 0 0 10px rgb(190, 190, 190);;
    border: 1px solid rgb(180, 180, 180);;
  }

  main {
    padding: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;

  }

.movie{
    display: flex;
    flex-direction: column;
    width: 150px;
}

.movie div{
    margin-top: 5px;
}

JS

const API_URL = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=3fd2be6f0c70a2a598f084ddfb75487c&page=1'
const IMG_PATH = 'https://image.tmdb.org/t/p/w1280'
const SEARCH_API = 'https://api.themoviedb.org/3/search/movie?api_key=3fd2be6f0c70a2a598f084ddfb75487c&query='

const main = document.getElementById('main')
const search = document.getElementById('search')
const form = document.getElementById('form')

function getMovies(url) {
  fetch(url)
    .then(response => response.json())
    .then(data => {
      data.results.forEach(movie => {
        const div = document.createElement('div')
        div.className = 'movie'
        div.innerHTML = `
        <div class="movie">
          <img src="${IMG_PATH + movie.poster_path}" alt="${movie.title}">
          <div>
            <h4>${movie.title}</h4>
            <p><small>${movie.release_date}</small></p>
          </div>
        </div>
        `
        main.appendChild(div)
      })
    })
    .catch(error => console.log(error))
}

function searchMovies(query) {
  const url = SEARCH_API + query
  getMovies(url)
}

getMovies(API_URL)

form.addEventListener('submit', e => {
  e.preventDefault()
  main.innerHTML = ''
  searchMovies(search.value)
})

iurygdeoliveira / Web-development-classes

27º Desafio - Movie App - Peso 3 #32