diff --git a/README.md b/README.md index c58dcb5d..35e37165 100644 --- a/README.md +++ b/README.md @@ -2,615 +2,33 @@ ## Í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.Introdução] (#1-Introdução) +- [2. Resumo do projeto](#2-histórias-de-usuário) +- [3. Prototipação](#3-prototipação) +- [4. Considerações finais](#5-considerações-finais) --- -## 1. Preâmbulo +## 1. Introdução -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. +Desenvolvido em duplas para a segunda etapa do Bootcamp da Laboratória Brasil, com o objetivo de manipular dados onde os mesmos se convertam em informação fazendo com que os usuários consigam visualizar o que estão buscando. -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_. +Para esse projeto tínhamos uma série de dados (temas) diferentes em que poderíamos escolher com que tipo de dados gostaríamos de trabalhar. -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 partir da escolha dos dados iniciamos o projeto, nosso projeto é voltado para usuários que jogam ou desejam conhecer o jogo Pokémon Go. +O resultado final foi uma página web que permite visualizar os Pokémons , filtrá-los, ordená-los e fazer algum cálculo agregado dos tipos. -![json-interface](https://lh4.googleusercontent.com/Tn-RPXS26pVvOTdUzRT1KVaJ-_QbFs9SpcGLxSPE43fgbHaXtFgMUInuDt7kV41DkT1j8Tt29V0LxQW7SMtC6digOIhfTXSBKdwI08wUwhD3RAqlwy0hjfmhZ2BFe91mtmCSEqysfgk) +## 2. Histórias de usuário -## 2. Resumo do projeto +A partir das histórias de usuário obtidas por entrevista, obtivemos informações pra criação de uma persona de onde partimos pra desenvolver os protótipo 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). +## 3. Prototipação +Elaboramos o protótipo de alta fidelidade considerando a usabilidade e disposição dos cards na tela do usuário em várias telas de tamanhos diferentes. +![Protótipo](/src/image/prototype.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. +## 4. Considerações finais -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

- - - [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 ` - - + + + + Pokémon Arena + + + + + + +
+ + +
+
+ +
+ + + + + + + + +
+ + +

+ + + + +
+ + + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index ad60a3f4..a6253d1a 100644 --- a/src/main.js +++ b/src/main.js @@ -1,8 +1,66 @@ -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'; +import { searchByName, selectType, calcType, sortAZ, } from './data.js' + + +const pokemons = data.pokemon; + +function cardsPokemons(data) { + document.getElementById("calculation").innerHTML = ""; + const cardPokemon = document.getElementById("cards"); + cardPokemon.innerHTML = data.map((item) => + `
+

${item.num}

+ +

Name:

+

${item.name}

+

Type:

+

${item.type.join(' | ')}

+

About:

+

${item.about}

+
` + + ).join("") + +} +cardsPokemons(pokemons); + +const search = document.getElementById("inputSearch") + +search.addEventListener("keypress", () => { + const searchName = search.value; + const pokemonsName = searchByName(searchName, pokemons); + cardsPokemons(pokemonsName); +}) + +const filterType = document.querySelector(".select-typefilters"); + +filterType.addEventListener("change", () => { + const filterbyType = filterType.value; + const arrFilter = selectType(filterbyType, pokemons); + cardsPokemons(arrFilter); + typePercent(); +}) + + +function typePercent() { + + const filterType = document.querySelector(".select-typefilters").value; + let result = calcType(pokemons, filterType); + document.getElementById("calculation").innerText += `The selected pokémon represent ${result}% of the total.` +} + + + +const sortOrder = document.getElementById("sortAlphabet"); + +sortOrder.addEventListener("change", (event) => { + const selectedSort = event.target.value; + const filterAz = sortAZ(pokemons, selectedSort); + cardsPokemons(filterAz); + +}) + +const refreshPage = document.getElementById("clearButton") + +refreshPage.addEventListener("click", () => cardsPokemons(pokemons)); -console.log(example, data); diff --git a/src/style.css b/src/style.css index e69de29b..f174cd2a 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,171 @@ +@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Merriweather:wght@300&family=Oxygen:wght@300&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + +} + +body { + height: 100vh; + width: 100%; + background-attachment: fixed; + background-repeat: no-repeat; + background-size: cover; + overflow-x: hidden; + font-family: 'Lobster', cursive; + font-family: 'Merriweather', serif; + font-family: 'Oxygen', sans-serif; +} + +header { + background-color: #8FBDD3; + height: 30%; + width: 100%; + display: flex; + opacity: 80%; + justify-content: center; +} + + +.search-button { + background-color: #434343 +} + + + + + +#inputSearch { + display: flex; + float: center; + margin: auto; + background-color: #E0EEEE; + font-size: 15px; + border-radius: 70px; + border-color: transparent; + margin-left: 5%; +} + +.select-typefilters,.sort-by, #inputSearch + +{ + margin: auto; + border-radius: 70px; + background-color: #E0EEEE; + border: solid 2px #369b9e; + width: 30vh; + height: 22%; + display: flex; + display: inline-block; +} + +.refresh-button { + + margin: auto; + border-radius: 70px; + width: 30vh; + height: 22%; + justify-content: center; + border-color: orange; + background-color: #FFCE45;} + +.cards { + display: flex; + width: 98%; + justify-content: space-around; + flex-wrap: wrap; + flex-direction: row; + grid-gap: 5em; + padding: 2em; + border: #369b9e; +} + +.info-cards { + max-width: 200px; + font-size: 0.9em; + text-align: center; + padding: 0.8em; + color: rgb(0, 0, 0); + background-color: rgb(255, 255, 255); + font: arial; + color: #434343; + border-radius: 16px; + background-color: #FFCE45; + flex-direction: column; +} + +.img-card { + width: 100%; + background-image: url(image/bg-card.png); +} + +#num { + text-align: center; + font-weight: bold; + border-radius: 0.3rem; + background-color: white; + display: flex; + font-size: 2%px; + width: 40px; + height: 40px; + border-radius: 50%; + align-items: center; + justify-content: center; + z-index: 0; + margin-left: 30px; + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1); +} + +.calculation { + display: flex; + justify-content: center; + align-items: center; + font-size: large; + background-color: #8FBDD3; + opacity: 75%; + color: blue; + line-height: 8vh; + width: 90vw; + margin: 0.5em auto 0; + line-height: 8vh; + height: 8vh; + border-radius: 20px; + font-size: 1em; + text-align: center; + text-transform: uppercase; + font-weight: bolder; +} + +#type, +#about, +#name { + color: #424b54; +} + +.title { + font-weight: bold; + border-bottom: 1px solid white; + float: initial; + color: rgb(117, 117, 117); +} + +footer { + margin: auto; + background-color: #8FBDD3; + color: #E0EEEE; + padding: 5%; + font-weight: bold; + text-align: center; + box-shadow: none; +} + +a { + text-decoration: none; +} + +.inputs { + display: flex; + margin: 2% auto 2% auto; +} \ No newline at end of file diff --git a/test/data.spec.js b/test/data.spec.js index 09b1f23f..db5569d6 100644 --- a/test/data.spec.js +++ b/test/data.spec.js @@ -1,23 +1,48 @@ -import { example, anotherExample } from '../src/data.js'; +import { selectType } from '../src/data.js'; - -describe('example', () => { - it('is a function', () => { - expect(typeof example).toBe('function'); +describe('selectType, () => { + it('Deve ser uma função', () => { + expect(typeof selectType).toBe('function'); }); - it('returns `example`', () => { - expect(example()).toBe('example'); - }); -}); + it('Deve retornar pokemons do tipo "bug"', () => { + const pokemons = [ + {"num": "042", + "name": "golbat", + "type": [ + "poison", + "flying" + ]}, +<<<<<<< HEAD + {"num": "001", + "name": "bulbasaur", + "type": [ + "grass", + "poison" + ]}, -describe('anotherExample', () => { - it('is a function', () => { - expect(typeof anotherExample).toBe('function'); - }); + {"}num": "010", + "name": "caterpie", + "type": [ + "bug" + ]}, + ]; - it('returns `anotherExample`', () => { - expect(anotherExample()).toBe('OMG'); + let buscartipo = "bug" + const tipo= selectType (buscartipo, pokemons); + expect(tipo[0].name).toEqual("caterpie") + }); }); +======= + describe('Realizar testes no campo de ordenação', () => { + it('Verificar se é uma função', () => { + expect(typeof sortAZ).toBe('function'); + }); + it('Quando o usuário acionar a função, devolve ordenado por nome (ABC)', () => { + expect(sortAZ(arrayTest)).toBe(arrayTest); + }); + }) + +>>>>>>> 1e3b3b19c0bb50ef82d01802b44bf43f3c138a08 diff --git a/thumb.png b/thumb.png deleted file mode 100644 index 37abbb68..00000000 Binary files a/thumb.png and /dev/null differ