Giter Club home page Giter Club logo

pokedex-vue's Introduction

Pokedex - Vue

Zrzut ekranu 2020-09-13 o 7 41 44 PM

Task description

The task was to prepare a Pokedex - a list of Pokemons, which will contain basic information about each of them using external API called PokeAPI.

Zrzut ekranu 2020-09-13 o 7 42 06 PM

Launching the app

After downloading, go to the folder where the downloaded files are located (pokedex or pokedex-master). The application should be started with the command npm start (which also starts npm install), and then the application should be opened in the browser on one of the given addresses (e.g. http://localhost:8080/).

Technologies used in the project

  • JavaScript
  • Vue.js (Vuex, VueRouter)
  • HTML, CSS
  • Vuetify - UI library
  • Axios - HTTP library

Functionalities

The Pokedex application allows to display a list of pokemons, which includes pagination. On the main page there are cards with pokemons, buttons for navigating through the list, a field for entering the name of the searched pokemon and a button to go to the page with filtering by types. After hovering the mouse over the selected card with a photo, the name of the selected pokemon appears. When you click on the card with Pokemon, it displays a dialog box that contains a picture and basic information about the pokemon, such as: name, type of pokemon (blue fields), base experience, height, weight and skills (yellow spaces). At the bottom of the page there are arrows to scroll the list.

On the home page there is also a field to enter the searched name of pokemon - Search by name. The search works in such a way that it compares exactly typed name, regardless of case. After entering the name and pressing the magnifying glass or key enter, the list is scrolled to the page where searched pokemon is located and a dialog box with information about it appears. After closing the dialog with the Choose me button, you can continue to navigate from there.

After pressing the Types Filter button, it is possible to filter the list by types of Pokemon. The available types of Pokemon are electric, grass, fire, water. After selecting the filter, cards with pokemon of the selected type are displayed. The same functionality as the main page is available: name display by hovering over the card and displaying the dialog box about a given Pokemon after clicking on the card. In order to go back to the home page, please click the 'Pokedex List' button.

Zrzut ekranu 2020-09-13 o 7 42 48 PM

Summary

I used photos from https://pokeres.bastionbot.org website. However, in the windows the photo dialogs are taken from PokeAPI. The consequence of this may be their longer loading on the website. The application does not check if there is a photo at the address.

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.