API.bible Logo
MenuClose Menu

Documentation Navigation

Verse of the day

Table of Contents

One way API.Bible can be used is to create a verse of the day. Here is a tutorial showing how it can be done.

The finished webpage will look like this:

Finished Screenshot

View a live version here: http://abs-js-demo.elevatorup.com/basic/daily-verse.html

##Styling This tutorial is focused on the JavaScript. So if your following along, just download the following two files and put them into a css directory (right-click on the file name to save).

Also, you can download the logo we use on our page here and put it in an img directory.

The main.css file is specific to this project. The scripture.css file was developed by API.Bible. It was created to style the HTML that is returned from API calls. This will allow the scripture passages be formatted correctly.

##HTML - daily-verse.html

Start by creating an HTML file called daily-verse.html. Add the HTML below. This has HTML boilerplate as well as a basic structure for the page.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
    <link href="../css/main.css" rel="stylesheet" />
    <link href="../css/scripture.css" rel="stylesheet" />
    <title>Bible API Example Application</title>
  </head>
  <body>
    <header>
      <div class="container">
        <a href="index.html" class="logo" title="American Bible Society">ABS</a>
      </div>
    </header>
    <div class="subheader">
      <div class="container flex">
        <div class="subheadings">
          <h2>Verse of the Day:</h2>
          <h3 id="viewing"><span id="verse"></span></h3>
        </div>
      </div>
    </div>
    <main class="container">
      <div id="verse-content" class="verse-container"></div>
    </main>
    <script src="http://cdn.scripture.api.bible/fums/fumsv2.min.js"></script>
    <script>
      // JAVASCRIPT GOES HERE
    </script>
  </body>
</html>

JavaScript - daily-verse.html

JavaScript will be used to fill in the verse-container from our HTML with a verse of the day. The first thing to do is to define the constants. Add this code in the daily-verse.html file where it says JAVASCRIPT GOES HERE.

const API_KEY = ``; // Fill in with your own key.
const verse = document.querySelector(`#verse-content`);
const verseRef = document.querySelector(`#verse`);
const BIBLE_ID = `61fd76eafa1577c2-02`;
const VERSES = [
  `JER.29.11`,
  `PSA.23`,
  `1COR.4.4-8`,
  `PHP.4.13`,
  `JHN.3.16`,
  `ROM.8.28`,
  `ISA.41.10`,
  `PSA.46.1`,
  `GAL.5.22-23`,
  `HEB.11.1`,
  `2TI.1.7`,
  `1COR.10.13`,
  `PRO.22.6`,
  `ISA.40.31`,
  `JOS.1.9`,
  `HEB.12.2`,
  `MAT.11.28`,
  `ROM.10.9-10`,
  `PHP.2.3-4`,
  `MAT.5.43-44`,
];
const verseIndex = Math.floor(Math.random() * VERSES.length);
const verseID = VERSES[verseIndex];

Make sure to fill in your own API key on the first line. You can sign up to get a key at https://scripture.api.bible/.

There are many ways to get a list of verses for a verse-of-the-day page. We've chosen to hard-code this list. In this example, a verse is chosen at random on every page load. However, to keep the same verse all day, you could use the day of the month as the verseIndex (make sure you have 31 verses in the VERSES array).

const verseIndex = new Date().getDate();

Now we need to add the list of verses to the page. We'll define the getResults() function soon. But first we'll use the function and update the HTML with the result. For the verse to be styled correctly according to scripture.css, it needs to be enclosed in an element with class eb-container. You will see that in the code.

Add this code below the other JavaScript.

getResults(verseID).then((data) => {
  const passage = data.passages[0];
  verseRef.innerHTML = `<span><i>${passage.reference}</i></span>`;
  verse.innerHTML = `<div class="text eb-container">${passage.content}</div>`;
});

Here is the definition for the getResults() function already used. Put this below the other JavaScript.

function getResults(verseID) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.addEventListener(`readystatechange`, function () {
      if (this.readyState === this.DONE) {
        const { data, meta } = JSON.parse(this.responseText);
        _BAPI.t(meta.fumsId);
        resolve(data);
      }
    });
    xhr.open(
      `GET`,
      `https://api.scripture.api.bible/v1/bibles/${BIBLE_ID}/search?query=${verseID}`
    );
    xhr.setRequestHeader(`api-key`, API_KEY);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

The code above is what creates the API call and returns a verse. This function returns a Promise. Returning a promise makes sure the program will wait until data is returned from the API before attempting to do something with the data.

In line 10, FUMS data is sent to the API.Bible server using a function from a JavaScript file included in the HTML. FUMS is the Fair Use Management System. It's a system that we ask all API developers to use as a way to help us ensure that the API contents are being used fairly. It also allows us to profile usage of the various versions, books, chapters, and verses that are requested from the API, so that we can communicate the value of API-accessible Scripture texts back to copyright holders and publishers.

##Conclusion We're done! Try refreshing the page a few times and looking at different verse.

The next step in this project could be to get the list of verses differently or choose the verse of the day differently.

Prev

Conclusion

Next

Getting Started