Random Book Generator

Hi all,

I’ve had a long list of books in Excel for some time so I thought of adapting the quote generator to pull a random book from the list.

The database is currently in Airtable and is pulling via API.

My main issue right now is that as far as I know someone can just grab my api key from the code and grab the entire dataset which would be painful considering I spent years scraping the web to create it. In the meantime, I’ve just cut the dataset to 75 records until I figure it out.

Would love any direction on what to research. So far I’ve found out about config files and api’s that limit usage to a domain but I’m not entirely sure where to go.

Would also love feedback on the site itself. Thanks everyone!

Live version: https://pangaeasbox.github.io/
Slightly older CodePen version: https://codepen.io/myqntm/pen/VGZKQV

1 Like

Why not configure the API to only return a single random quote?

Did you write the API? I have not used Airtable, but I assume you can write code to select a random quote from the data source and return it.

After researching a bit, it appears Airtable does not have any functions which could create a random number which would be needed to to select a random row of your table.

FYI - I wanted to make a suggestion of how to make your current solution more efficient and make it less likely for a site visitor to less likely to max out your airtable rate limit.

Instead of pulling the entire 75 quotes down everytime the TRAVEL button is clicked, why not download the quotes one time when the body loads and then have your travel function only select and display a random quote from data when someone clicks it.

This can be accomplished in a couple of ways, but one way is to create a new function named getData and execute it when the body loads. You will need to add onload=“getData()” in the opening body tag.

Next you copy the code of your existing travel function into a new function named getData, but remove all the code which has to do with selecting the random quote and displaying it. This means your getData function would look like:

var getData = function() {
  // Create a request variable and assign a new XMLHttpRequest object to it.
  var request = new XMLHttpRequest();
  // Open a new connection, using the GET request on the URL endpoint
    "GET", "https://api.airtable.com/v0/appybL1OJaEEIvAdS/Books?api_key=keymAugpaEvXsyGBr",  true
  request.onload = function() {
    data = JSON.parse(this.response);
  // Send request

and your travel function would simply become:

var travel = function() {
  var choices = data.records.length;
  var selection = Math.floor(Math.random() * choices);

  var author = data.records[selection].fields.Author;
  var title = data.records[selection].fields.Title;
  var country = data.records[selection].fields.Country;

  document.querySelector("h2").innerHTML = country;
  document.querySelector("h1").innerHTML = title;
  document.querySelector("h3").innerHTML = author;

There is on last important detail to make all of this work. You need to declare data as a global variable outside either of the functions. You will notice in the getData function above, instead of declaring var as a local function variable, I just assign it the parsed JSON data.

BONUS: Now that you download all the data when the page loads, you have the option of populating the page with a random quote when the page first loads instead of having those question marks display. I will let you figure out where you need to call the travel function to make this work.

1 Like

I had a feeling a random function directly from Airtable would be the way to go but couldn’t figure out how to make it work. Thank you for confirming that it doesn’t look like it exists. I’ll also look into possibly hosting the dataset elsewhere where I can get that functionality.

That’s a great suggestion! Thank you. My api rate was a somehow forgotten concern but totally important.