Data Lovers : Pokedex

Index

• 1. Product Definition
• 2. User Stories
• 3. User interface desing
• 4. Learning Objectives
• 5. Technical Considerations
• 6. Checklist
  
  

---

1. Product Definition

The main idea of this web page "Pokedex" is to help users to search, filter and obtain statistical data about the first 251 pokemons, in order to get a better user experience while playing the awesome game PokemonGo with the information received from the Pokedex.
The product shows some main characteristics in an orderly manner.
It can be used before, during and after the user has navigated in the platform, so they can play strategically in the game.

2. User Stories

User Story 1 (Beginner)

As a Pokémon GO beginner player, I want to perform a search on the page by the name of the pokemon to access the features much faster.

Criteria of acceptance:

 ☑️ In the interface the search engine must be visible and inside it there must be a text saying "search pokemon by name"
 ☑️ By clicking on the search bar, filter the pokemon that contains the letters that are being placed.
 ☑️ The page must show the desired Pokémon.

User Story 2 (Beginner)

As a Pokémon GO beginner player, I want to filter all pokemons by type ( Normal, Fighting, Flying, Poison, Ground, Rock, Bug, Ghost, Steel, Fire, Water, Grass, Electric, Psychic, Ice, Dragon, Dark, Fairy). to decide what kind of pokemon I will use for my next battles.

Criteria of acceptance:

 ☑️ Have a drop-down option that contains the 18 types of pokemons.
 ☑️ Of all the pokemon filtered with the desired type, you can click on the desired pokemon.
 ☑️ View the complete characteristics of the chosen pokemon in a pop-up window.

User Story 3 (Beginner)

As a Pokémon GO beginner player, I want to order the total of pokemons from A to Z and viceversa , to get an orderly visualization of the 251 Pokemons.

Criteria of acceptance:

 ☑️ Have a drop-down option that indicates 'order by'
 ☑️ When you click, the options should be displayed: A-Z and Z-A
 ☑️ Having selected an option, display the pokemons in an orderly way.

User Story 4 (Advanced)

As a Pokémon GO advanced player I, want to know the main attacks, movements, evolution of my Pokemon so I can ** define my battle strategy ** with other Pokemon masters.

Criteria of acceptance:

 ☑️ Have an interface that shows the Pokemons
 ☑️ When you click, a modal will appear where the user can view the characteristics
      of the selected Pokemon.

3. User interface desing

Low fidelity prototype

High fidelity prototype

4. Learning Objectives

HTML & CSS

• [✔️🐳] Use of semantic HTML.
• [✔️🐳] Use of CSS selectors.
• [✔️🐳] Build your application respecting the design made (layout).
• [✔️🐳] CSS: flexbox.

DOM & Web APIs

• [✔️🐱] Use of DOM selectors.
• [✔️🐱] DOM event handling.
• [✔️🐱] Dynamic DOM manipulation. (appendChild |createElement | createTextNode| innerHTML | textContent | etc.)

JavaScript

• [✔️🐼] Use of conditionals (if-else | switch | ternary operator)
• [✔️🐼] Using loops (for | for..in | for..of | while)
• [✔️🐼] Use of functions (parameters | arguments | return )
• [✔️🐼] Manipulate arrays (filter | map | sort | reduce)
• [✔️🐼] Manipulate objects (key | value)
• [✔️🐼] Use of ES modules (import | export)
• [✔️🐼] Differentiate between expression y statements.
• [✔️🐼] Differentiate between atomic and structured data types.

Testing

• [✔️🐱] Unit testing

Code structure and style guide

• [✔️🐼] Organize and divide the code into modules (Modularization)
• [✔️🐼] Use of descriptive identifiers (Nomenclature | Semantics)
• [✔️🐼] Use of linter (ESLINT)

Git & GitHub

• [✔️🐱] Using git commands(add | commit | pull | status | push)
• [✔️🐱] Managing GitHub repositories (clone | fork | gh-pages)
• Github collaboration (branches | pull requests | |tags)

UX

• [✔️🦄] Design the application thinking and understanding the user.
• [✔️🦄] Create prototypes to get feedback and iterate.
• [✔️🦄] Apply visual design principles (contrast, alignment, hierarchy)
• [✔️🦄] Plan and execute usability tests.

5. Technical Considerations

This project has been fully implemented in JavaScript (ES6), HTML and CSS.

boilerplate

.
├── EXTRA.md
├── README.md
├── package.json
├── src
|  ├── data 
|  |  ├── 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
|  ├── data.js
|  ├── index.html
|  ├── main.js
|  └── style.css
└── test
   └── data.spec.js

directory: 6 file: 17

6. Checklist

• [✔️🐶] Use VanillaJS.
• [✔️🐶] Does not use this.
• [✔️🐶] Pass linter (npm run pretest)
• [✔️🐶] Pass tests (npm test)
• [-] Unit tests cover a minimum of 70% of statements, functions and lines and branches.
• [✔️🐶] Include clear and informative Product Definition in README.md.
• [✔️🐶] Include user stories in README.md.
• [✔️🐶] Include sketch of the solution (low fidelity prototype) in README.md.
• [✔️🐶] Includes User Interface Design (hi-fi prototype) in README.md.
• [✔️🐶] UI: Shows list and / or table with data and / or indicators.
• [✔️🐶] UI: Allows you to sort data by one or more fields (asc and desc).
• [✔️🐶] UI: Allows you to filter data based on a condition.
• [✔️🐶] UI: It is responsive. *modals need fixing.

Pokedex is a project done by Maribel Maza for Laboratoria ,
July 2021 🤗