Giter Club home page Giter Club logo

pokedex's Introduction

Pokedex

A web application written in Vue.js

Project setup

npm install

Compiles and hot-reloads for development

npm start

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Pokedex

Pokedex is a small web application to list all pokemon with options of filtering. Each Pokemon can be viewed for more detailed information such as the pokemon's

  • Type
  • About
    • Abilities
    • Training data
    • Breeding
  • Base stats

pokedex's People

Contributors

shady356 avatar dependabot[bot] avatar

Stargazers

 avatar

Watchers

 avatar Robin Bekkevold avatar

pokedex's Issues

Performance issue when multiple requests are sent to the API

When retrieving multiple pokemon, the method sends a request for each pokemon respectively. Rewrite this so it sends one single request for multiple pokemon (or pagination) to minimize the number of requests to the API.

Example, you can use offset and limit params:
"https://pokeapi.co/api/v2/pokemon?offset=20&limit=20"

Allow multiple stats to be highlighted

Only one stat is saved as best stat per now. If there are more than one stat that has equal values and are considered to be the best stat, then highlight them.

Example: Speed has the same value as Spc. Def. In this example both should be highlighted with bold style

image

File: src\components\pokemon\PokemonBaseStats.vue

Reset filters

Should be possible to reset the filters and reset the view back to default.

image

Store active filters state when reopen filters

Save filters when reopen the filters modal.

Example: If Kanto and Johto was set as filters, store these values so they are still active when you reopen the filter modal. It should also save the combination of the different categories available. Example of code structure:

activeFilters: {
  generations: ['kanto', 'johto'],
  types: ['fire']
}

Could possibly be saved in a vuex state

image

Toast component mount programmatically

Create the toast like this:

import Vue from 'vue'
import Popup from './popup'
const PopupCtor = Vue.extend(Popup)
const PopupIns = new PopupCtr()
PopupIns.$mount()
document.body.append(PopupIns.$el)
Vue.prototype.$popup = Vue.$popup = function () {
  PopupIns.open()
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.