JavaScript interactive grid of cards

User Generated




The assignment is to take JavaScript arrays full of JavaScript objects and make a nicely formatted and interactive grid of "baseball cards". The cards will have an image on the front with a name or other identifier and it will be able to "flip" to show some stats or other interesting information on the back. This CodePen should be useful:

You may use whatever source of data you like (Star Wars, Senators, Pokemon, etc.) but you must have at least 25 cards on display. You must also provide the ability for a user to add a new, blank card to your collection.

The page should include the following elements:

  1. Header that summarizes what the page is about
  2. Grid full of at least 25 images that look somewhat like baseball or playing cards
  3. Interactive cards individually flip with an animation of your choice to show stats

The skills to demonstrate with this page are:

  • Ability to filter, map, and reduce arrays of JavaScript objects
  • Click event handling to make the card interactive
  • Basic CSS and/or JavaScript animations
  • Flexbox skills to evenly layout grid of cards with pictures
  • New custom JavaScript object creation

User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.

Explanation & Answer

The new picture...

Just what I needed. Studypool is a lifesaver!


Related Tags