Building a Random Card Generator for Magic: The Gathering

Published in

The Startup

5 min readOct 13, 2020

Learn to build this Random Card Generator in less than 100 lines of code

Use Case

A random card generator (RCG) can be so much more than just a fun gimmick to add to your app or website. An RCG is a useful tool to introduce cards to your users that they might have never discovered on their own. One of the more well-known examples of an RCG is EDHREC’s “Commander of the Day” which is used to showcase random commanders to encourage players to build new and different EDH decks.

RCG’s also allow you to easily create a “fresh” landing page experience that is never the same no matter how many times someone may visit it. Adding this randomized content can prevent your site from feeling “stale” to daily users, especially during those inevitable busy days where you simply don’t have time to update your site.

Now that we have a good idea of why we want to add an RCG to our site, let’s dive into how we go about making one.

Skill Check

This is a Beginner Level tutorial so you don’t need to be an expert, but it is suggested you have at least basic familiarity with the following technologies:

HTML
JavaScript
CSS

If you need a place to write your code, create a new sandbox at CodePen. If you’ve never used CodePen, it will let you create front end applications with no setup and also update automatically as you type - super easy!

Step 1 — Lay It Out

This app is comprised of two primary components, the card image and the “randomize” button. Let’s start with a simple HTML skeleton.

Pretty simple, and it gets the job done. We have our card image on line 3, and the randomize button on line 4; life is good. Let’s add some basic styling to make the app more visually appealing.

The first pass at styling our Random Card Generator.

The styling in the body gives us a nice generic background that provides a contrast to the text of the card. The #button styles give us something better than a generic button and creates an increased click area for ease of use.

The #card styling is the most important aspect here, it allows us to style the actual Magic card display. When working with Magic cards, I recommend nothing smaller than 336px by 240px; any smaller and it can be difficult to read the text on the card. Whatever size you use, keep in mind that Magic cards have a 5:7 aspect ratio. Finally, note that most card images come as simple rectangles without the traditional rounded edges; to remedy this, add a 12px border-radius to the card image.

At the end of this step, you should have something that looks like this —

Step 2 — Get The Data

The next step is to integrate the actual Magic card data into the app. We will be using the popular Scryfall API as our backend data source. To update our card image with Scryfall data, we will need a small snippet of JavaScript.

Let’s walk through what this code is doing, line by line.

On line 1 we are defining a function called fetchCard which will handle all our logic.
On line 3 we are calling the Scryfall API at the provided URL to receive our card data. We then wait for it to return the card data, which can take roughly half a second.
On line 4 we take that response and turn it into a JSON object, which will contain the URL of the image we wish to show. We will use this again later on line 8.
On line 7 we use document.getElementById to get a reference to our card HTML object from earlier.
Finally, on line 8 we get the URL for the card image from the JSON on line 4. We do this by doing card.image_uris.normal and then updating our card HTML object’s src attribute with that image URL, making it appear in the app.

But hold on, why is the image still not loading? This is because we need to call the function from somewhere in our HTML. Go back to index.html from Step 1 and replace it with the following code —

Both lines 2 and 4 have changed from Step 1. Line 2 adds a call to fetchCard() using the onload attribute. As you can probably guess, this change tells the app to call fetchCard() once the <body> tag has been loaded; thus ensuring that the app will display a card when the user first opens the app. Similarly, the change on line 4 to the <button> tag will also call fetchCard() but only when the button is clicked. Either way, each call to fetchCard() will get a new card and update the display.

Step 3 — Personalize

At this point, the app is functionally complete. I encourage you to customize the look and feel of your new RCG by expanding upon the CSS laid out in this tutorial. You can also customize the type of card you get by modifying the Line 3 in index.js; this can be done by adding the q query parameter to the Scryfall URL. You can read the Scryfall Search Reference for details on how to use the q query parameter but I’ve added some examples here —

// Get only planeswalker cards
https://api.scryfall.com/cards/random?q=t:planeswalker// Get only red cards
https://api.scryfall.com/cards/random?q=c:red// Get creatures that have the word "haste" in their text
https://api.scryfall.com/cards/random?q=t:creature o:"haste"

Random card generators can be a powerful way to introduce new content to your users, and they can be implemented on your site or app in less than 100 lines of code. Happy coding!

Tutorial End Result

My Custom Implementation