Git Product home page Git Product logo

challenge's Introduction

๐Ÿ–ณ Programming Challenge >>

Please create a basic vue-powered project that uses the Rick and Morty API for backend to create 3 pages and add a side bar for navigation between them

  1. A page that fetches a list of characters from Rick and Morty API

    • display the data as a table with the following columns: name, species, status, gender, origin.name
    • add pagination to the table of 20 records per page. (it's the built-in default page size for the API)
    • on mouseover of a row, the character's name and picture appear in a popup.
    • add a filter to the table by status (alive, dead or unknown) and by gender (female, male, genderless or unknown). Please use 2 dropdowns to implement these filters.
    • add a search by character's name
    • both of the filters and the name search should work together. (ie, we want to be able to both search for something and then filter by status, or use both flters simultaneously, etc)
  2. A page that fetches a list of locations from the API

    • sort the list by location title
    • location titles are clickable and open a modal popup
      • the popup contains the location's name, type, dimension at the top
      • a table of characters from this location that behaves exactly like the List of Characters from #1
    • location list can be filtered (searched) using a text input by type
  3. A page that fetches a list of episodes from the API. This page should function similarly to the list of locations page:

    • sort the list by episode number (default sorting)
    • Episode names are clickable and open a modal popup
      • the popup contains the episode's name, and air_date at the top
      • a table of characters from this episode that behaves exactly like the List of Characters from #1

Commit the project to a github repo and share with us. Thanks!

โ˜…โ˜… Extra Credit Challenge โ˜…โ˜…

Compile and deploy the project to a github pages site ๐Ÿ‘

You are free to approach the challenge in any way you like and use any stack/dependencies you like or are familiar with, such as

  • bootstrap
  • vue-router
  • vuetify
  • webpack
  • nuxt
  • axios
  • fontawesome
  • materialdesign

challenge's People

Contributors

metroengines-vlad avatar

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.