O objetivo deste exercício é replicar essa página, encontrada no arquivo 'Desafio front academy 2.fig'.

• Header
  • Input de busca
    • Ao clicar na lupa ou aperta a tecla Enter deverá filtrar os filmes por nome
• Seção de Top Filmes
  • A seção de Top Filmes deve exibir os 5 primeiros filmes da lista encontrada no arquivo 'data.js'
• Seção de Filmes
  • A seção de Filmes deve exibir todos os filmes da lista encontrada no arquivo 'data.js'
  • Ao clicar em uma categoria (ex: Ação, Romance, etc), apenas filmes dessa categoria devem ser exibidos na seção filmes (a seção de "Top Filmes" deve permanecer como está)
• Banner de cupom de desconto
  • Caso clicado, o cupom de desconto deve ser aplicado e o banner deve desaparecer
• Sacola
  • Adição/remoção de filmes
  • Deverá exibir o total da soma de todos os filmes adicionados
  • Ao clicar no botão de "sacola" dentro de um filme, esse filme deve ser adicionado à sacola
    • Caso ele não esteja na sacola, adicione-o com quantidade 1
    • Caso ele esteja na sacola, aumente a quantidade em 1
  • Caso o input de cupom de desconto esteja preenchido com o valor htmlnaoelinguagem e o usuário aperte a tecla Enter, um desconto de 10% deve ser aplicado no total da compra

• Conceitos
  • Não usar estado quando uma variável bastaria
  • Componentização e organização de código
  • Limpar efeitos (só é aplicável ao do setInterval)
• Responsividade
• Banner de cupom de desconto
  • O banner do cupom de desconto deve exibir uma contagem regressiva de 5 minutos a partir do momento em que a página abre
  • No fim do período de 5 minutos, o banner deve desaparecer
• Sacola
  • O desconto somente deve ser aplicado se o banner ainda estiver visível, seja por quê o usuário não clicou no banner ou pelo tempo de 5 minutos ainda não ter passado
  • Persistir o valor total e os itens adicionados no localStorage

LEMBRE-SE: é melhor feito do quê perfeito!!!