Getting a list of books

##HTML - book.html The HTML on book.html is very similar to index.html above. There are a few changes, however. The changes don't specifically relate to the API, but they make a better user experience. The changes will be discussed below the code.

<!DOCTYPE html>
<html>
  <head>
    <link href="css/main.css" rel="stylesheet" />
    <title>Bible API Example Application</title>
  </head>
  <body class="index">
    <header>
      <div class="container">
        <h1>
          <a class="flex" href="/">
            <span class="logo" title="American Bible Society">ABS</span>
            <span>API Demo App</span>
          </a>
        </h1>
      </div>
    </header>
    <div class="subheader">
      <div class="container flex">
        <div class="subheadings">
          <h2>Viewing:</h2>
          <h3 id="viewing"></h3>
        </div>
        <div class="search-area flex">
          <button onclick="searchButton()">🔎</button>
          <input
            type="text"
            id="search-input"
            placeholder="ex. 'John 3:16-19' OR 'kingdom'"
            size="30"
            onkeydown="if (event.keyCode == 13) searchButton()"
          />
        </div>
      </div>
    </div>
    <div class="container crumbs">
      <div id="breadcrumbs"></div>
    </div>
    <main class="container">
      <h4 class="list-heading"><span>Select a Book</span></h4>
      <div id="book-list" class="list-container"></div>
    </main>
    <script src="js/my_key.js"></script>
    <script>
      // JAVASCRIPT GOES HERE
    </script>
  </body>
</html>

Here are the main changes between this file and index.html:

On line 22, we added an h3 tag with id="viewing". This will be filled with the selected Bible version.
Lines 25-28 now contain a search box. Searching here will take the user to a new page (search.html) containing the results of the search. The search page will be discussed later.
Lines 31-32 add breadcrumbs to the page. This is a way for users to see what they already selected and easily navigate to previous pages.
Lines 35-36 change up the list id and heading.

JavaScript - `book.html`

The first part of the JavaScript is below. Just like in the last section, this JavaScript should be placed in thechapter.html file where it says JAVASCRIPT GOES HERE.

const bibleBookList = document.querySelector(`#book-list`);
const breadcrumbs = document.querySelector(`#breadcrumbs`);
const bibleVersionID = getParameterByName(`version`);
const abbreviation = getParameterByName(`abbr`);
let bookHTML = ``;
if (!bibleVersionID) {
  window.location.href = `./index.html`;
}
getBooks(bibleVersionID).then((bookList) => {
  bookHTML += `<ul>`;
  for (let book of bookList) {
    bookHTML += `<li><a href="chapter.html?version=${bibleVersionID}&abbr=${abbreviation}&book=${book.id}"> ${book.name} </a></li>`;
  }
  bookHTML += `</ul>`;
  bibleBookList.innerHTML = bookHTML;
});
document.querySelector(`#viewing`).innerHTML = `${abbreviation}`;
const breadcrumbsHTML = `
  <ul>
    <li><a href="index.html">Home</a></li>
    <li>${abbreviation}</li>
  </ul>
`;
breadcrumbs.innerHTML = breadcrumbsHTML;

Lines 2-4 use a helper function (getParameterByName - defined below) to get the query parameters passed from the previous page. The parameter bibleVersionID is used to make the API call to get a list of chapters. Since the query parameter is required, lines 8-10 return the user to index.html if it is not available. The parameter abbreviation is used for the breadcrumbs and the viewing subheading.

Line 12 calls the getBooks function (shown next), which gets the list of books from the API. Lines 13-19 use the results to build a book list. Like before, notice that the link in line 15 includes query parameters to pass data to the next page.

Lines 21-28 fill in the viewing subheading and breadcrumbs.

function getBooks(bibleVersionID) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.addEventListener(`readystatechange`, function () {
      if (this.readyState === this.DONE) {
        const { data } = JSON.parse(this.responseText);
        const books = data.map(({ name, id }) => {
          return { name, id };
        });
        resolve(books);
      }
    });
    xhr.open(
      `GET`,
      `https://api.scripture.api.bible/v1/bibles/${bibleVersionID}/books`
    );
    xhr.setRequestHeader(`api-key`, API_KEY);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

Every page on this site contains an API call and the code for these calls are almost identical. If you plan to use API.Bible for your own JavaScript project, you will likely have code that looks very similar to this.

The only differences are what specific data is passed back from the API call (lines 8-9, in this case just name and id) and the url in line 15.

Notice that the URL for the API call includes the variable bibleVersionID. This is important to get the correct information from the API.

These next two functions are helper functions that don't have much to do with the API.

function getParameterByName(name) {
  const url = window.location.href;
  name = name.replace(/[\[\]]/g, `\\$&`);
  const regex = new RegExp(`[?&]` + name + `(=([^&#]*)|&|#|$)`),
    results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return ``;
  return decodeURIComponent(results[2].replace(/\+/g, ` `));
}
function searchButton() {
  const searchInput = document.querySelector(`#search-input`);
  window.location.href = `./search.html?&version=${bibleVersionID}&abbr=${abbreviation}&query=${searchInput.value}`;
}

The getParameterByName function does what you would expect. The searchButton function loads the search page with the given search term. One thing to look at is the URL. The query parameters included are necessary for the Search page, which includes another API call.

Documentation Navigation

Table of Contents

JavaScript - `book.html`

Getting a list of Bible versions

Getting a list of chapters

Getting a list of books

Table of Contents

JavaScript - book.html

Getting a list of Bible versions

Getting a list of chapters

JavaScript - `book.html`