Git Product home page Git Product logo

rick-and-morty's Introduction

Rick-and-Morty

https://rforde1.github.io/Rick-and-Morty/

Contributors

Garrett Reichman
Rami Forde
Samad Ali

Description

This project was made to display our abilities in regards to front end development. The UI was made using HTML and Materialize's stylings and components. The interactivity was achieved using Jquery and javascript. The application queries the Rick and Morty api to retrieve information about requested characters, locations, and/or episodes. It then created card elements using that information, then displays them to the screen. Each card also contains click listeners, allowing the user to traverse between search results. The 2nd page allows the user to play a trivia style game, where they must try to move from the starting character to the target character with as few transitions as possible. The 3rd page uses the utelly and geolocation api to allow the user to find where they can watch Rick and Morty in their country, or one of the countries listed in the field of buttons.

Usage

Home

When the page is first loaded, it will default to the wiki page where you may search for characters/episodes/locations by name or id. Each result will display the information about the target as well as provide clickable text that allows the user to traverse all available results related to it. The navbar at the top of the page can be used to change to either the game page or the where to watch page. Screenshot

Game

When the game page is loaded, the user will be prompted with a button to begin the game. Once the game starts, the starting character will be displayed on the left, with the target character and number of moves taken displayed on the right. The user will then have to use the results given about the character to view either the location or episode(s) the character is found in. This process will continue with the user traversing from characters to episode/location back to characters until the target character has been found. The step counter is incremented every time new characters are displayed. Once the target has been found, both sides will show the same character and the game will be over.

Screenshot

Where to Watch

When the where to watch page is loaded, the user will be asked to allow the site to access their location. If they accept, the application will use their current location to attempt to display where to watch the show in their country. Afterwards, the user may use the buttons shown on the left side of the page to view links to various platforms where Rick and Morty is available in their country.

Screenshot

Resources

Rick and Morty api: https://rickandmortyapi.com/
Utelly api: https://rapidapi.com/utelly/api/utelly
Geolocation api: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
Materialize CSS: https://materializecss.com/
Reverse Geo-location: https://rapidapi.com/Noggle/api/reverse-geocoding-and-geolocation-service

rick-and-morty's People

Contributors

greichman avatar rforde1 avatar ssali595 avatar

Stargazers

 avatar

Watchers

 avatar

rick-and-morty's Issues

Utelly Api

Create page to load user location and display where to watch the show in their country

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.