diff --git a/.eslintrc b/.eslintrc
index 2df98b63..2adf1e31 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,6 +1,7 @@
{
"env": {
- "browser": true
+ "browser": true,
+ "es6": true
},
"parserOptions": {
"ecmaVersion": 2018,
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..f673a71b
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+ "liveServer.settings.port": 5502
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index c58dcb5d..09828ec1 100644
--- a/README.md
+++ b/README.md
@@ -1,616 +1,178 @@
-# Data Lovers
+
-## Índice
-
-- [1. Preâmbulo](#1-preâmbulo)
-- [2. Resumo do projeto](#2-resumo-do-projeto)
-- [3. Objetivos de aprendizagem](#3-objetivos-de-aprendizagem)
-- [4. Considerações gerais](#4-considerações-gerais)
-- [5. Critérios mínimos de aceitação do
- projeto](#5-critérios-mínimos-de-aceitação-do-projeto)
-- [6. Hacker edition](#6-hacker-edition)
-- [7. Considerações técnicas](#7-considerações-técnicas)
-- [8. Pistas, dicas e leituras
- complementares](#8-pistas-dicas-e-leituras-complementares)
-- [9. Checklist](#9-checklist)
-
----
-
-## 1. Preâmbulo
-
-Segundo a
-[Forbes](https://www.forbes.com/sites/bernardmarr/2018/05/21/how-much-data-do-we-create-every-day-the-mind-blowing-stats-everyone-should-read)
-90% dos dados que existem hoje foram gerados durante os últimos dois anos. A
-cada dia geramos 2.5 milhões de terabytes de dados, uma cifra sem precedentes.
-
-Apesar disso, os dados por si só são de pouca utilidade. Para que essas grandes
-quantidades de dados se convertam em **informação** compreensível para os
-usuários, precisamos entender e processar estes dados. Uma forma simples de
-fazer isso é criando _interfaces_ e _visualizações_.
-
-Na imagem seguinte, você pode ver como os dados que estão na parte esquerda
-podem ser usados para construir a interface amigável e compreensível que está na
-parte direita.
-
-
-
-## 2. Resumo do projeto
-
-Neste projeto você **construirá uma _página web_ para visualizar um _conjunto
-(set) de dados_** que se adeque às necessidades de seu usuário.
-
-Como entregável final terá uma página web que permita **visualizar dados,
-filtrá-los, ordená-los e fazer algum cálculo agregado**. Por cálculo agregado
-nos referimos aos diversos cálculos que podem ser feitos com os dados para
-mostrar a informação mais relevante para os usuários (médias, valores máximos e
-mínimos, etc).
-
-Para este projeto trazemos uma série de dados de _temáticas diferentes_ para que
-você explore e decida com qual delas deseja trabalhar. Escolhemos
-especificamente estes conjuntos de dados porque cremos que se adequem bem a esta
-etapa de sua aprendizagem.
-
-Uma vez que você defina sua área de interesse, busque entender quem é seu
-usuário e o que exatamente ele necessita saber ou ver, para que assim possa
-construir a interface que o ajude a interagir e entender melhor os dados.
-
-Este são os dados que propomos:
-
-- [Pokémon](src/data/pokemon/pokemon.json): Neste conjunto você encontrará uma
- lista com os 151 Pokémon da região de Kanto, com suas respectivas estatísticas
- utilizadas no jogo [Pokémon GO](http://pokemongolive.com).
-
- - [Pesquisa com jogadores de Pokémon Go](src/data/pokemon/README.pt-BR.md)
-
-- [League of Legends - Challenger leaderboard](src/data/lol/lol.json): Este
- conjunto mostra a lista de jogadores de uma liga do jogo League of Legends
- (LoL).
-
- - [Pesquisa com jogadores de LoL](src/data/lol/README.pt-BR.md)
-
-- [Rick and Morty](src/data/rickandmorty/rickandmorty.json). Lista de
- personagens da série Rick & Morty. Você pode revisar a documentação da API
- neste [link](https://rickandmortyapi.com).
-
- - [Pesquisa com seguidores de Rick and Morty](src/data/rickandmorty/README.pt-BR.md)
-
-- [Jogos Olímpicos do Rio de Janeiro](src/data/athletes/athletes.json).
- Este conjunto nos fornece a lista de atletas que conquistaram medalhas nas
- Olimpíadas do Rio de Janeiro.
-
- - [Pesquisa com stakeholders dos Jogos Olímpicos do Rio de Janeiro](src/data/athletes/README.pt-BR.md)
-
-- [Studio Ghibli](src/data/ghibli/ghibli.json).
- Lista de animações e personagens do [Studio Ghibli](https://ghiblicollection.com/).
- - [Pesquisa com seguidores de Studio Ghibli](src/data/ghibli/README.pt-BR.md)
-
-O objetivo principal deste projeto é que aprenda a desenhar e construir uma
-interface web onde se possa visualizar e manipular dados, entendendo o que o
-usuário necessita.
-
-## 3. Objetivos de aprendizagem
-
-Reflita e depois enumere os objetivos que quer alcançar e aplique no seu projeto. Pense nisso para decidir sua estratégia de trabalho.
-
-### HTML
-
-- [ ] **Uso de HTML semântico**
-
- Links
-
- - [HTML semántico](https://curriculum.laboratoria.la/pt/topics/html/02-html5/02-semantic-html)
- - [Semantics in HTML - MDN](https://developer.mozilla.org/en-US/docs/Glossary/Semantics#Semantics_in_HTML)
-
-
-### CSS
-
-- [ ] **Uso de seletores de CSS**
-
- Links
-
-### Web APIs
-
-- [ ] **Uso de seletores de DOM**
-
- Links
-
- - [Modificando o DOM](https://curriculum.laboratoria.la/pt/topics/browser/02-dom/03-1-dom-methods-selection)
- - [Introdução ao DOM - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction)
- - [Locating DOM elements using selectors - MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors)
-
-
-- [ ] **Gerenciamento de eventos de DOM**
-
- Links
-
- - [Valores, tipos de dados e operadores](https://curriculum.laboratoria.la/pt/topics/javascript/01-basics/01-values-variables-and-types)
- - [Variáveis](https://curriculum.laboratoria.la/pt/topics/javascript/01-basics/02-variables)
-
+---
-- [ ] **Uso de funções (parâmetros, argumentos, valor de retorno)**
+## 1. Sobre o projeto
- Links
+
+
- - [Funções (controle de fluxo)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/03-functions)
- - [Funções clásicas](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/01-classic)
- - [Arrow Functions](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/02-arrow)
- - [Funções — blocos reutilizáveis de código - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions)
-
+Desenvolvido por [Dayanne Maryssol](https://www.linkedin.com/in/dayannemaryssol/), durante o Bootcamp da Laboratória da turma 007.
+
-- [ ] **Testes unitários**
+O objetivo principal deste projeto foi aprender a desenhar e construir uma interface web onde se possa visualizar e manipular dados, entendendo o que o usuário necessita. A temática escolhida foi o universo do - [Studio Ghibli](https://pt.wikipedia.org/wiki/Studio_Ghibli), que é um estúdio japonês de animação, muito conhecido por seus filmes como **Meu Amigo Totoro, A Viagem de Chihiro, O Castelo Animado**, entre outros grandes sucessos.
+As animações são bem recebidas em todo o mundo e algumas receberam várias nomeações e prêmios. De todo esse fandom há um grupo que deseja interagir e ver as informações das animações e seus personagens.
- Links
+O site comporta dados a respeito do filme e dos personagens, para que o usuário possa filtrar, ordenar e buscar por informações de seu interesse. O público alvo são jovens a partir de 12 anos, pois, ainda que o público alvo do Studio Ghibli englobe crianças por conta das animações, é necessário que o usuário possa ler e interpretar as informações apresentadas.
- - [Introdução ao Jest - Documentação oficial](https://jestjs.io/docs/pt-BR/getting-started)
-
+O site permite que o usuário filtre os filmes por diretor e ano de lançamento, ordene os filmes por ordem alfabética, pesquise os filmes de seu interesse e recarregue a página quando lhe for conveniente. A página dos personagens, por sua vez, permite que o usuário filtre-os por gênero e espécie e os ordene por ordem alfabética, bem como pesquise os personagens e recarregue a página.
-- [ ] **Uso ES modules**
+---
- Links
+Utilizei o Google Forms como ferramenta para realizar a pesquisa visando descobrir qual é a idade dos usuários e quais seriam os seus interesses na aplicação web que seria desenvolvida.
-- [ ] **Uso de linter (ESLINT)**
-- [ ] **Uso de identificadores descritivos (Nomenclatura | Semântica)**
+Obtivemos os seguintes resultados:
-- [ ] **Diferença entre expression e statements**
+
-### Git e GitHub
+
-- [ ] **Git: Instalação e configuração**
+
-- [ ] **Git: Controle de versão com git (init, clone, add, commit, status, push, pull, remote)**
+* 40,7% dos usuários tem entre 16-21 anos e mais de 30% tem entre 22-33 anos.*
-- [ ] **Git: Integração de mudanças entre ramos (branch, checkout, fetch, merge, reset, rebase, tag)**
+
-- [ ] **GitHub: Criação de contas e repositórios, configuração de chave SSH**
+
-- [ ] **GitHub: Implantação com GitHub Pages**
+
- Links
+* 53,7% já conhecem as animações e se declaram fãs das animações.*
+
+
- - [Site oficial do GitHub Pages](https://pages.github.com/)
-
+
-- [ ] **GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)**
+
-### user-centricity
+* Parte significativa dos entrevistados afirmaram ter interesse em pesquisar filmes por diretor, ano de lançamento e por ordem alfabética dos personagens.*
-- [ ] **Desenhar a aplicação pensando e entendendo a usuária**
+### História de usuário
-### product-design
+# Quem são os usuários?
-- [ ] **Criar protótipos para obter feedback e iterar**
+. Crianças a partir dos 7 anos que já iniciaram a leitura e escrita;
+. Pessoas com deficiência visual;
+. Fãs e simpatizantes de animes e mangás;
+. Pessoas que gostam de histórias relacionadas a cultura japonesa;
+. Consome conteúdo de qualidade, criativo, ilustrações;
+. Gosta de assistir filmes de aventura e fantasia;
-- [ ] **Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)**
+
-### research
+
-- [ ] **Planejar e executar testes de usabilidade**
+
-## 4. Considerações gerais
+**Definição de produto:** o usuário precisa escolher como quer ordenar as animações, bem como filtrar os personagens e os filmes, obtendo um cálculo da porcentagem que cada opção representa em relação a todas as animações.
-- Este projeto será executado em duplas.
-- Este projeto será entregue através do GitHub e a interface deve ser publicada
- no [GitHub Pages](https://pages.github.com/).
-- Tempo para completá-lo: Tome como referencia 4 semanas.
+---
-## 5. Critérios mínimos de aceitação do projeto
+## 3.Protótipo
-Os critérios considerados para que tenha terminado este projeto são:
+No início do projeto, utilizei o [Canva](https://www.canva.com/) como ferramenta para esboçar um protótipo de baixa fidelidade. O wireframe foi elaborado com a finalidade de permitir que a navegação do usuário se dê pelas seguintes páginas: a página inicial, a página dos filmes e a página dos personagens, bem como o link para os perfil da autora e o link para o site da Laboratoria no rodapé.
-### Definição de produto
+- A pagina inicial:
-Documente brevemente seu trabalho no arquivo `README.md` de seu repositório,
-contando como foi o processo de desenho e como você acredita que o produto possa
-resolver o problema (ou problemas) de seu usuário.
+
-### Histórias de usuário
+
-Uma vez que entenda a necessidade dos usuários, escreva as [Historias de
-Usuario](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) que
-representem tudo que o usuário precisa fazer/ver. As **histórias de usuário**
-devem ser o resultado de seu processo de investigação/pesquisa de seus usuários.
+
-Não esqueça de incluir a definição de pronto (_definition of done_) e os
-critérios de aceitação para cada uma.
+- A página de Filmes:
-Na medida do possível, termine uma história de usuário antes de passar para a
-seguinte (cumpra com as definições de pronto + critérios de aceitação).
+
-### Desenho de interface do usuário
+
-#### Protótipo de baixa fidelidade
+
-Durante seu trabalho você deverá fazer e iterar rascunhos de sua solução usando
-lápis e papel. Recomendamos que fotografe todas as iterações que fizer, suba
-para seu repositório e as mencione no `README.md`.
+- A página de Personagens:
-#### Protótipo de alta fidelidade
+
-O passo seguinte é desenhar sua Interface de Usuário (UI - _User Interface_).
-Para isso você deverá aprender a usar alguma ferramenta de _visual design_. Nós
-recomendamos [Figma](https://www.figma.com/) que é uma ferramenta que funciona
-no navegador e no qual é possível criar uma conta gratuita. Mas você é livre
-para usar outros editores gráficos como Illustrator, Photoshop, PowerPoint,
-Keynote, etc. Lembre-se de usar a identidade gráfica correspondente ao arquivo
-de dados que escolher.
+
-O protótipo deve apresentar o que seria _ideal_ em sua solução. Digamos que é o
-que desejaria implementar se tivesse tempo ilimitado para hackear. Não se
-esqueça de incluir em seu protótipo os fundamentos de _visual design_.
+
-#### Testes de usabilidade
+* Cada página possui destaque no menu de referência para orientação de navegação. Quando o usuário estiver na página de Filmes, o menu ficará destacado, como podemos ver no protótipo.
-Durante o desafio você deverá fazer testes de usabilidade com usuários
-diferentes, e com base nos resultados desses testes, iterar seus desenhos de
-interface. Conte-nos quais problemas de usabilidade você detectou através dos
-testes e como os resolveu na proposta final.
+- A definição da paleta de cores foi baseada em tons de azul, seguindo a identidade visual do Studio, assim como a sua logo, foi minha inspiração principal.
-### Implementação da interface de usuário (HTML/CSS/JS)
+
-Após desenhar sua interface de usuário, deverá trabalhar na sua implementação.
-**Não** é necessário que construa a interface exatamente da mesma forma que
-desenhou. Terá um tempo limitado para trabalhar no projeto, então você deve
-priorizar as tarefas.
+
-No mínimo, sua implementação deverá:
+
-1. Mostrar os dados em uma interface: pode ser em cards, tabelas, listas, etc.
-2. Permitir ao usuário interagir com a interface para obter as informações que
- necessita;
-3. Ser _responsiva_, ou seja, deve ser visualizada sem problemas a partir de
- diversos tamanhos de tela: celulares, tablets, notebooks, etc.
-4. Que a interface siga os fundamentos de _visual design_.
+---
-### Testes unitários
+## 4. Projeto final
-O _boilerplate_ do projeto não inclui testes unitários. Assim, você terá que
-escrever seus próprios testes para as funções encarregadas de _processar_,
-_filtrar_ e _ordenar_ os dados, assim como _calcular_ estatísticas.
+A página inicial contém na barra de navegação opções das páginas de “Filmes” e “Personagens”. O logo utilizado encaminha o usuário para a página oficial do estúdio em uma nova janela.
-Seus testes unitários devem ter cobertura mínima de 70% de _statements_
-(_sentenças_), _functions_ (_funções_), _lines_ (_linhas_), e _branches_
-(_ramos_) do arquivo `src/data.js`, que irá conter suas funções e que está
-detalhado na seção de [Considerações técnicas](#srcdatajs).
+
-## 6. Hacker edition
+
-As seções chamadas _Hacker Edition_ são **opcionais**. Se já tiver terminado
-todos os requisitos anteriores e tiver tempo, pode tentar completá-las. Dessa
-forma, você pode aprofundar e/ou exercitar mais os objetivos de aprendizagem
-deste projeto.
+
-Features/características extra sugeridas:
+---
-- Ao invés de consumir dados estáticos do repositório, pode fazer isso de forma
- dinâmica, carregando um arquivo JSON com `fetch`. A pasta `src/data` contém
- uma versão `.js` e uma `.json` de cada conjunto de dados.
-- Adicione à sua interface visualização de dados em forma de gráficos. Para
- isso, recomendamos explorar bibliotecas de gráficos como
- [Chart.js](https://www.chartjs.org/) ou [Google
- Charts](https://developers.google.com/chart/).
-- 100% de cobertura nos testes.
-
-## 7. Considerações técnicas
+## 5. Implementações futuras
-A lógica do projeto deve estar implementada somente em JavaScript (ES6), HTML e
-CSS. Neste projeto não está permitido o uso de bibliotecas e frameworks, apenas
-[vanilla
-JavaScript](https://medium.com/laboratoria-how-to/vanillajs-vs-jquery-31e623bbd46e),
-com exceção das bibliotecas para gráficos (ver [_Parte
-opcional_](#6-hacker-edition) acima).
-
-O _boilerplate_ contém uma estrutura de arquivos como ponto de partida, assim
-como toda a configuração de dependências:
-
-```text
-.
-├── EXTRA.md
-├── README.md
-├── package.json
-├── src
-| ├── data (de acordo com o data que forem trabalhar)
-| | ├── lol
-| | | ├── lol.js
-| | | ├── lol.json
-| | | └── README.md
-| | ├── pokemon
-| | | ├── pokemon.js
-| | | ├── pokemon.json
-| | | └── README.md
-| | └── rickandmorty
-| | | ├── rickandmorty.js
-| | | ├── rickandmorty.json
-| | | └── README.md
-| | └── athletes
-| | | ├── athletes.js
-| | | ├── athletes.json
-| | | └── README.md
-| | └── ghibli
-| | | ├── ghibli.js
-| | | ├── ghibli.json
-| | | └── README.md
-| ├── data.js
-| ├── index.html
-| ├── main.js
-| └── style.css
-└── test
- └── data.spec.js
-
-directory: 7 file: 20
-```
-
-### `src/index.html`
-
-Como no projeto anterior, existe um arquivo `index.html`. Como já sabe, aqui
-entra a página que vai ser exibida ao usuário. Também serve para indicar quais
-scripts serão utilizados e juntar tudo o que foi feito.
-
-### `src/main.js`
-
-Recomendamos que utilize `src/main.js` para todos os códigos que tenham a ver
-com a exibição dos dados na tela. Com isto nos referimos basicamente à interação
-com o DOM. Operações como criação de nós, registro de manejadores de eventos
-(_event listeners_ ou _event handlers_) e etc.
-
-Esta não é a única forma de dividir seu código. Pode utilizar mais arquivos e
-pastas, sempre e quando a estrutura estiver clara para suas colegas.
-
-Neste arquivo você encontrará uma série de _imports comentados_. Para carregar
-diferentes fontes de dados, você deverá "descomentar" esses _imports_. Cada um
-destes _imports_ criará uma variável `data` com os dados correspondentes à fonte
-escolhida.
-
-Por exemplo, se "descomentamos" a seguinte linha:
-
-```js
-// import data from './data/pokemon/pokemon.js';
-```
-
-A linha ficaria assim:
-
-```js
-import data from "./data/pokemon/pokemon.js";
-```
-
-E agora teríamos a variável `data` disponível em `src/main.js`.
-
-### `src/data.js`
-
-O coração deste projeto é a manipulação de dados através de arrays e objetos.
-
-Recomendamos que este arquivo contenha toda a funcionalidade que corresponda a
-obter, processar e manipular dados (suas funções):
-
-- `filterData(data, condition)`: esta função receberia os dados e nos retornaria
- os que cumprem com a condição.
-
-- `sortData(data, sortBy, sortOrder)`: esta função recebe três parâmetros. O
- primeiro, `data`, nos entrega os dados. O segundo, `sortBy`, diz respeito a
- qual das informações quer usar para ordenar. O terceiro, `sortOrder`, indica
- se quer ordenar de maneira crescente ou decrescente.
-
-- `computeStats(data)`: essa função nos permite fazer cálculos estatísticos
- básicos para serem exibidos de acordo com o que os dados permitem.
-
-Estes nomes de funções e parâmetros são somente referência, o que vocês decidirem
-utilizar vai depender da sua implementação.
-
-Estas funções devem ser
-[_puras_](https://imasters.com.br/desenvolvimento/serie-js-e-vida-pure-functions-funcoes-puras)
-e independentes do DOM. Estas funções serão depois usadas a partir do arquivo
-`src/main.js`, ao carregar a página e a cada vez que o usuário interagir com a
-interface (cliques, seleções, filtros, ordenação, etc).
-
-### `src/data`
-
-Nesta pasta estão os dados de diferentes fontes. Você vai encontrar uma pasta
-para cada fonte, e dentro de cada pasta estão dois arquivos: um com a extensão
-`.js` e outro `.json`. Ambos os arquivos contém os mesmos dados; a diferença é
-que podemos usar o `.js` com uma tag `
+
+
+
+ Filme
+
+
+
+
+
+
+
+
- - [Funções (controle de fluxo)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/03-functions)
- - [Funções clásicas](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/01-classic)
- - [Arrow Functions](https://curriculum.laboratoria.la/pt/topics/javascript/03-functions/02-arrow)
- - [Funções — blocos reutilizáveis de código - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Functions)
-
+Desenvolvido por [Dayanne Maryssol](https://www.linkedin.com/in/dayannemaryssol/), durante o Bootcamp da Laboratória da turma 007.
+
+ 
- - [Modelo de Caixa e Display](https://curriculum.laboratoria.la/pt/topics/css/01-css/02-boxmodel-and-display)
- - [The box model - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- - [Introduction to the CSS box model - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)
- - [CSS display - MDN](https://developer.mozilla.org/pt-BR/docs/Web/CSS/display)
- - [display - CSS Tricks](https://css-tricks.com/almanac/properties/d/display/)
-