Random JavaScript BootStrap Cards

Yes, that’s a tongue-twister right there.

For my website Qwick.info, I had been thinking about a random links type of deal going for the site and wanted to tap in to my limited JavaScript knowledge. In 2001-02, back in my loser trailer park trash days, I made a ‘Web TV page’ and attempted to make my own TV network. Well, YouTube arrived in 2005 and even the early version of YouTube was a helluva lot better than what I made.

I called the “network” BJ69-ITV. What would happen is when you pressed the Watch TV button on the site, at which ever time you visit the site, you’d be directed to a page with a show. Most of the shows were Flash animations (.swf, remember those?) my friends made or other popular ones they had in 2001-02. Also, I had made a public access type of deal (kinda famous in the 90s) where one can look up info and click on a link provided. When watching BJ69-ITV, you shows would be limited to 30 minutes, you can visit the TV at 11:03pm to watch my friend’s funny Flash anime all the way until 11:33pm (the anime was just 2 minutes long), the script will refresh and you’d go on to the next show. I think at 11:30pm was a “public access” show with info and links. Boring…

SHUT up now! Get to the code!

Okay, you’re right. No one cares about my TV project in 01-02. I sadly can’t find the disc with all this code because it would’ve been a little more easier to build the Random JavaScript BootStrap Cards. So here’s how I did it. Before we go on, thanks to Treehouse for the help.

First of all, I used BootStrap 4’s cards. You can find the info here and this is a pic of what one of the cards looks like on Qwick.info:

Random JavaScript BootStrap Cards
Random BootStrap Card from Qwick.info.

One of the things I would be taught in TreeHouse and trying my damnest not to be subject to my ADHD, I would find out that continuing a multiline string in JavaScript needs a “\” to continue. CSS-Tricks has a easy example of this. I found it a little strange to see this on a CSS oriented site (for those who don’t know, CSS and JavaScript are quite different… at least I’d say that).

So, to make the card via BootStrap, this would be the code:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

And here’s how I started the randomization for the JS code, this is the END of the code, not the beginning:


var randomNumber = Math.floor(Math.random() * 4 ) + 1;
if (randomNumber === 1) {
document.write(card01)
} else if (randomNumber === 2) {
document.write(card02)
} else if (randomNumber === 3) {
document.write(card03)
} else {
document.write(card04)
}

Now, to make the BootStrap cards to a string, here is the first one for starters. This is the card for Top 5 NES Games in the picture above:


var card01 = "<div class='card' style='width: 20rem;''> \
<img class='card-img-top img-thumbnail' src='http://qwick.info/20170116-RPGNes/img/ultima.png' alt='NES RPGs'> \
<div class='card-block'> \
<h4 class='card-title'>Top 5 NES RPGs</h4> \
<p class='card-text'>Qwick counts down the Top 5 RPG games for the NES! This contains vids.</p> \
<a href='http://www.qwick.info/20170122-RPGNesVid/' class='btn btn-primary'>Play on!</a> \
</div> \
</div> \
<BR>"

Now, for any web development beginners, you can see a lot of these: ” or quotation marks. Those are useful when filling out classes. I’m not good at explaining this, so this site would be helpful.

However, on the last block of code (the one that starts with var card01 = ) shows one set of quotation marks opposed to very many on the first block. Besides the first ” is very far away from the other “, you may have noticed that the rest of the ” have been replaced with a single quotes, or ‘. And at each end of a line (the formatting here doesn’t show it exactly) is a “\”. So, since we got that down all of the syntax correct, I copy + pasted the code three more times to make card02, card03 and card04. Card03 represents the 90s Super groups.

You can find this on my GitHub.