Coder Social home page Coder Social logo

rick-morty's Introduction

Rick & Morty Character Catalog

Rick-Morty-Modal

The Exercise

Using any image API of your choice, or API that returns content with images:

  • Retrieve a list of at least 50 images and display them as thumbnails on a page
  • Paginate thumbnails by 10 thumbnails per page
  • When clicking on an image it should display in a modal.
  • All images should be about a specific theme or based on a specific word

Technical Constraints

  • The Application should be built with html/js/css
  • You may use pre-processors for css (but no frameworks, such as bootstrap)
  • You may use whatever build tools you want
  • The application should work and run when executing npm i && npm start from its root directory
  • Please code in vanilla JS (no frameworks, or libraries)
  • Take responsive design into consideration
  • Your application only needs to work in Chrome
  • If applicable: Include instructions for running your unit tests

Get Started

TERMINAL:

git clone https://github.com/victoramosjr/rick-morty.git
cd rick-morty
npm i && npm start

BROWSER:


API

Rick-Morty-API

https://rickandmortyapi.com/


DESIGN CONSIDERATIONS

  • Data loading placeholders for slow connections.

Rick-Morty-Loading

  • Responsive layout adapted for mobile & desktop use.

Rick-Morty-Responsive


CODING CONSIDERATIONS

  • Thorough comments for working in shared codebase.

Rick-Morty-Commented


v2 OPPORTUNITIES

  • Add range of pages numbers (ex: 1-3) to pagination.
  • Use URL params to dictate API call.

rick-morty's People

Contributors

victoramosjr avatar

Watchers

 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.