diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Carina.png b/Carina.png new file mode 100644 index 00000000..5f4c18fb Binary files /dev/null and b/Carina.png differ diff --git a/Ivan.png b/Ivan.png new file mode 100644 index 00000000..51cfc60d Binary files /dev/null and b/Ivan.png differ diff --git a/Luan.png b/Luan.png new file mode 100644 index 00000000..8e946a5a Binary files /dev/null and b/Luan.png differ diff --git a/README.md b/README.md index c58dcb5d..4eb80987 100644 --- a/README.md +++ b/README.md @@ -1,616 +1,55 @@ -# Data Lovers +![](/ReM.jpg) -## Índice +# Data Lovers - Rick and Morty -- [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) ---- +Esperamos que você possa se divertir e ter a melhor experiência possível. +Para acessar o projeto clique [aqui]() -## 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. +- [Introdução](#introdução) +- [Planejamento](#planejamento) +- [Persona e História de Usuários](#persona-e-historia-de-usuarios) +- [Funcionalidade](#funcionalidade) +- [Teste](#teste) +- [Ferramentas Utilizadas](#ferramentas-utilizadas) +- [Desenvolvedoras](#desenvolvedoras) -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_. +## Introdução -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. +A animação é uma série adulta norte-americana de comédia e ficção científica estreada em 2013, que conta a história do cientista bebado Rick e seu neto pré-adolescente Morty, que se envolvem em diversas aventuras. -![json-interface](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) +O projeto consiste na criação de uma página web para visualização de um conjunto (set) de dados que se adeque às necessidades do usuário. -## 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. +## Planejamento -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). +O planejamento e organização do projeto foi feito com método Kanban, utilizando o Trello como ferramenta. Foram desenvolvidos passos advindos de histórias de usuários que foram criadas a partir de pesquisas. Veja nosso quadro [aqui](https://trello.com/b/OzYeDH7D/data-lovers-rick-e-morty)! +![](/trello.png) -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. +## Persona e História de Usuários +![](/Carina.png) +![](/Ivan.png) +![](/Luan.png) -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. +## Funcionalidade -Este são os dados que propomos: +A aplicação foi desenvolvida pensando nos fãs e suas necessidades de visualizar e manipular dados da animação. Focando no interesse em conhecer mais sobre a série, os personagens, épisodios, entre outras curiosidades. Levando em consideração a funcionalidade, acessibilidade e a experiencia como um todo. -- [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). +## Teste - - [Pesquisa com jogadores de Pokémon Go](src/data/pokemon/README.pt-BR.md) +## Ferramentas Utilizadas -- [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). +Para a construção desse projeto foram utilizadas as seguintes ferramentas: - - [Pesquisa com jogadores de LoL](src/data/lol/README.pt-BR.md) +- JavaScript +- HTML 5 +- CSS +- Node.JS -- [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). +## Desenvolvedoras +Segundo projeto da sétima geração do bootcamp de front-end da Laboratória. - - [Pesquisa com seguidores de Rick and Morty](src/data/rickandmorty/README.pt-BR.md) +:woman: Taila Martins
-- [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

- - - [Intro a CSS](https://curriculum.laboratoria.la/pt/topics/css/01-css/01-intro-css) - - [CSS Selectors - MDN](https://developer.mozilla.org/es/docs/Web/CSS/CSS_Selectors) -

- -- [ ] **Empregar o modelo de caixa (box model): borda, margem, preenchimento** - -
Links

- - - [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/) -

- -- [ ] **Uso de flexbox en CSS** - -
Links

- - - [A Complete Guide to Flexbox - CSS Tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - - [Flexbox Froggy](https://flexboxfroggy.com/#pt-br) - - [Flexbox - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox) -

- -### 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

- - - [Introdução a eventos - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/Events) - - [EventTarget.addEventListener() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener) - - [EventTarget.removeEventListener() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/removeEventListener) - - [El objeto Event](https://developer.mozilla.org/pt-BR/docs/Web/API/Event) -

- -- [ ] **Manipulação dinâmica de DOM** - -
Links

- - - [Introdução ao DOM](https://developer.mozilla.org/pt-BR/docs/DOM/Referencia_do_DOM/Introdu%C3%A7%C3%A3o) - - [Node.appendChild() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/appendChild) - - [Document.createElement() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createElement) - - [Document.createTextNode()](https://developer.mozilla.org/pt-BR/docs/Web/API/Document/createTextNode) - - [Element.innerHTML - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML) - - [Node.textContent - MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Node/textContent) -

- -### JavaScript - -- [ ] **Diferenciar entre tipos de dados primitivos e não primitivos** - -- [ ] **Manipular arrays (filter, map, sort, reduce)** - -
Links

- - - [Arrays](https://curriculum.laboratoria.la/pt/topics/javascript/04-arrays) - - [Array.prototype.sort() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) - - [Array.prototype.forEach() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) - - [Array.prototype.map() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/map) - - [Array.prototype.filter() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) - - [Array.prototype.reduce() - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) -

- -- [ ] **Manipular objects (key | value)** - -
Links

- - - [Objetos em JavaScript](https://curriculum.laboratoria.la/pt/topics/javascript/05-objects/01-objects) -

- -- [ ] **Variáveis (declaração, atribuição, escopo)** - -
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 condicionais (if-else, switch, operador ternário)** - -
Links

- - - [Estruturas condicionais e repetitivas](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/01-conditionals-and-loops) - - [Tomando decisões no seu código — condicionais - MDN](https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Building_blocks/conditionals) -

- -- [ ] **Uso de laços (for, for..of, while)** - -
Links

- - - [Laços (Loops)](https://curriculum.laboratoria.la/pt/topics/javascript/02-flow-control/02-loops) - - [Laços e iterações - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Loops_and_iteration) -

- -- [ ] **Uso de funções (parâmetros, argumentos, valor de retorno)** - -
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) -

- -- [ ] **Testes unitários** - -
Links

- - - [Introdução ao Jest - Documentação oficial](https://jestjs.io/docs/pt-BR/getting-started) -

- -- [ ] **Uso ES modules** - -
Links

- - - [import - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/import) - - [export - MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/export) -

- -- [ ] **Uso de linter (ESLINT)** - -- [ ] **Uso de identificadores descritivos (Nomenclatura | Semântica)** - -- [ ] **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)** - -- [ ] **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

- - - [Site oficial do GitHub Pages](https://pages.github.com/) -

- -- [ ] **GitHub: Colaboração pelo Github (branches | forks | pull requests | code review | tags)** - -### user-centricity - -- [ ] **Desenhar a aplicação pensando e entendendo a usuária** - -### product-design - -- [ ] **Criar protótipos para obter feedback e iterar** - -- [ ] **Aplicar os princípios de desenho visual (contraste, alinhamento, hierarquia)** - -### research - -- [ ] **Planejar e executar testes de usabilidade** - -## 4. Considerações gerais - -- 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 - -Os critérios considerados para que tenha terminado este projeto são: - -### Definição de produto - -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. - -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`. - -#### 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 - -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. - -### 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 - -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. - -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 - -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 ` - - + + + + + + Rick and Morty | Data Lovers + + + + + + + + +
+

+ +
+
+ logo rick e morty +
+
+
+
+ + +
+ + + + + +
+
+ +
+
+
+
+ + + + + \ No newline at end of file diff --git a/src/logo-nome.png b/src/logo-nome.png new file mode 100644 index 00000000..49a1b406 Binary files /dev/null and b/src/logo-nome.png differ diff --git a/src/logo.png b/src/logo.png new file mode 100644 index 00000000..5d35f632 Binary files /dev/null and b/src/logo.png differ diff --git a/src/main.js b/src/main.js index ad60a3f4..9a8df0a0 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,108 @@ -import { example } from './data.js'; -import data from './data/pokemon/pokemon.js'; -// import data from './data/lol/lol.js'; -// import data from './data/rickandmorty/rickandmorty.js'; -// import data from './data/ghibli/ghibli.js'; -// import data from './data/athletes/athletes.js'; - -console.log(example, data); +import data from './data/rickandmorty/rickandmorty.js'; +import { filterData, sortBy, computeStats, filternome} from './data.js'; + +function aparecerCards(data) { + document.getElementById("lista-cards").innerHTML = data.map((item) => ` +
+
+
+ +

Nome:${item.name}

+
+
+

Genero:${item.gender}

+

Status:${item.status}

+

Especie:${item.species}

+

Origem:${item.origin.name}

+

Episodios que aparecem:${item.episode.length}

+

Local onde vive:${item.location.name}

+

Data de criação: ${item.created}

+ +
+
+
+ +` ).join(''); // tirou a virgulazinha que aparecia +}; +aparecerCards(data.results); + +function ordenarPersonagens(evt) { +evt.preventDefault(); +const selectOrdem = sortBy(data.results, evt.target.value); +aparecerCards(selectOrdem); +} +//função do filtro; +function filtroPersonagem(evt) { + evt.preventDefault(); + const genero = document.getElementById("selectGenero").value; + const especie = document.getElementById("selectEspecie").value; + const status = document.getElementById("selectStatus").value; + + let fData = data.results + + if (genero != "") { + fData = filterData(fData, ["gender", genero]); + + const selectPersonagens = { + 'totalLenght': data.results.length, + 'selectedLenght': fData.length + }; + const percentualTotal = computeStats(selectPersonagens); + document.getElementById("percentualTotal").innerHTML = `A porcentagem de personagens é: ${percentualTotal} % ` + } + if (status !="") { + fData = filterData(fData, ["status", status]) + const selectPersonagens = { + 'totalLenght': data.results.length, + 'selectedLenght': fData.length + }; + const percentualTotal = computeStats(selectPersonagens); + document.getElementById("percentualTotal").innerHTML = `A porcentagem de personagens é: ${percentualTotal} % ` + } + + if (especie != "") { + fData = filterData(fData, ["species", especie]); + const selectPersonagens = { + 'totalLenght': data.results.length, + 'selectedLenght': fData.length + }; + const percentualTotal = computeStats(selectPersonagens); + document.getElementById("percentualTotal").innerHTML = `A porcentagem de personagens é: ${percentualTotal} % ` + } + + aparecerCards(fData); +} + +function pesquisarNome(evt){ + evt.preventDefault(); + const devolveNome = filternome(data.results, evt.target.value); + + aparecerCards(devolveNome); +} + +function limparFiltros(){ + window.location.reload(); +} + + +document.getElementById("selectOrdem").addEventListener("change", ordenarPersonagens); +document.getElementById("selectStatus").addEventListener("change", filtroPersonagem); +document.getElementById("selectGenero").addEventListener("change", filtroPersonagem); +document.getElementById("selectEspecie").addEventListener("change", filtroPersonagem); +document.getElementById("pesquisarNome").addEventListener("keyup", pesquisarNome); +document.getElementById("limparFiltro").addEventListener("click", limparFiltros); + + + + + + + + + + + + + + + diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 00000000..af944401 --- /dev/null +++ b/src/reset.css @@ -0,0 +1,48 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29b..1aafbb56 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,194 @@ +body { + font-family: 'Amatic SC', cursive; + background: #0a0b0c; +} + +.cabecalho { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fefefe; +} + +.logo { + width: 120px; +} + +.menu-lista { + display: flex; + list-style: none; +} + +.itens { + color: #202329; + margin-right: 1.25rem; + text-decoration: none; + text-transform: uppercase; + font-size: 22px; +} + +.itens:active { + color: #0a0b0c; + font-weight: bold; +} + +.itens:hover { + text-decoration: underline; + color: #00FF00; +} + +.imagem-nome { + background: #fefefe; + display: flex; + justify-content: center; +} + +.nome-rick-and-morty { + width: 100%; +} + +/*pagina home*/ +.sobre-secao { + background: url(bg.jpg); +} + +.sobre { + padding: 0.5em; + text-align: center; + text-transform: uppercase; + color: #D0CFCE; + font-size: 22px; + font-family: Arial, Helvetica, sans-serif; +} + +.sobre-secao p { + text-align: justify; + font-size: 1.35rem; + font-weight: 900; + color: #fefefe; + padding: 1rem; + +} + +/*pagina personagens*/ +.menu { + display: flex; + flex-direction: row-reverse; + justify-content: center; + align-items: center; + padding: 00.5rem; +} + +.barra-de-pesquisa{ + display: flex; +} + +.pesquisar { + border: none; + padding: 0.9rem; + font-family: 'Amatic SC', cursive; + margin: 6px; + position: relative; + display: inline-block; + font-size: 1.2rem; + border-radius: 500px; + background: #66ff66; + box-sizing: border-box; +} +::placeholder { + color: #0a0b0c; +} +.btn-filtro:first-child { + margin-left: 0; +} +.btn-filtro { + cursor: pointer; + border: none; + padding: 0.9rem; + margin: 6px; + font-family: 'Amatic SC', cursive; + position: relative; + display: inline-block; + font-size: 1.2rem; + border-radius: 500px; + background: #66ff66; + color: #0a0b0c; + font-weight: bold; + +} +#percentualTotal { + display: flex; + justify-content: center; + color:#fefefe; + text-align: center; + font-size: 22px; +} +#lista-cards { + padding: 1rem; + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.card { + padding: 0.5rem; + margin-bottom: 15px; + width: 300px; + height: 350px; +} +.mostrar-cards { + width: 100%; + height: 100%; + transition: transform 2s; + transform-style: preserve-3d; + margin: 0 auto; +} +.card:hover .mostrar-cards { + transform: rotateY(180deg); +} +.cards-frente, .card-costa { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + border-radius: 5px; + border: 2px solid #00FF00; +} +.cards-frente { + color: #1ea51e; + text-align: center; +} +.cards-frente p { + padding-top: 10px; + font-weight: bold; + font-size: 22px; +} +.card-costa { + display: flex; + flex-direction: column; + justify-content: center; + transform: rotateY(180deg); + background-color: #D0CFCE; + color: #1ea51e; +} +.card-costa p { + text-align: center; + font-weight: bold; + font-size: 22px; +} +.rodape { + padding: 2rem; + background: #fefefe; +} + +.texto-rodape { + text-align: center; + font-size: 12px; + color: #0a0b0c; +} + +.links { + text-decoration: none; + color: #0a0b0c; +} + + diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..40e1467b 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,9 +1,9 @@ -import { example, anotherExample } from '../src/data.js'; +import { filterData, sortData, computeStats } from '../src/data.js'; -describe('example', () => { +describe('filterData', () => { it('is a function', () => { - expect(typeof example).toBe('function'); + expect(typeof filterData).toBe('function'); }); it('returns `example`', () => { @@ -12,9 +12,19 @@ describe('example', () => { }); -describe('anotherExample', () => { +describe('sortData', () => { it('is a function', () => { - expect(typeof anotherExample).toBe('function'); + expect(typeof sortData).toBe('function'); + }); + + it('returns `anotherExample`', () => { + expect(anotherExample()).toBe('OMG'); + }); +}); + +describe('computeStats', () => { + it('is a function', () => { + expect(typeof computeStats).toBe('function'); }); it('returns `anotherExample`', () => { diff --git a/trello.png b/trello.png new file mode 100644 index 00000000..f2e7be30 Binary files /dev/null and b/trello.png differ