/popular-movies

Projeto feito com HTML, CSS e JavaScript

Primary LanguageJavaScript

Popular-movies

Todos os filmes em um só lugar

📘 Sobre o projeto

Esse projeto faz parte de uma iniciativa da Alura, o #7DaysOfCode, que consiste em propor a construção de uma aplicação usando determinadas ferramentas durante 7 dias, sendo que a cada dia é dada uma tarefa, e há um design a ser seguido. O desafio em questão é sobre manipulação do DOM e consumo de API com JavaScript, podendo não só exercitar o que já aprendeu como conhecer e aplicar novas abordagens.

🚀 Testando o projeto

Para fazer uso da aplicação, será necessário rodá-la localmente em sua máquina e gerar uma chave de API do The Movie Database. Para isso, siga as instruções a seguir:

  1. Abra o Git Bash, selecione o diretório em que o projeto será clonado e use o comando:
$ git clone (url do repositório)
  1. Em seguida, acesse o site do The Movie Database, realize seu cadastro e gere a chave para utilizar a API.

  2. Por fim, vá no arquivo main.js e exclua a primeira linha (reponsável pelo import estático da key). Em seguida, atribua à váriavel API_KEY a sua chave, entre aspas. O código ficará semelhante ao exemplo abaixo:

export const API_KEY = "sua chave";

Após estes passos, basta abrir o arquivo index.html em seu navegador e testar o projeto como desejar.

🔨 Ferramentas usadas

💡 Conceitos utilizados

  • Flexbox
  • Responsividade
  • Manipulação do DOM
  • Consumo de API
  • Reação a eventos no DOM (clique, tecla pressionada)
  • Armazenamento de dados no localStorage
  • Modularização da aplicação

📚 Aprendizados

Ao longo dos sete dias de desafios, pude experimentar uma rotina de desenvolvimento mais estruturada, em que havia um projeto com um design a ser seguido e a cada dia eram dadas instruções do que devia ser feito. Comecei estruturando o HTML de forma estática e aplicando as regras de estilo de acordo com o protótipo estabelecido, e em seguida tornei o processo dinâmico por meio do JavaScript.

De longe, os maiores desafios foram lidar com os dados da API e com o localStorage, uma vez que todas as informações necessárias deveriam ser salvas em uma lista, e não podiam haver itens duplicados. Pude aprender a organizar cada passo da operação e tornar todo o processo o mais legível possível.

🤝 Conecte-se comigo

Para conhecer mais das minhas experiências desenvolvendo aplicações e aprendendo novas tecnologias, conecte-se comigo no LinkedIn, por lá interajo com outros profissionais e me mantenho ativo na comunidade de desenvolvedores.

linkedin