Getting a list of chapters

HTML - chapter.html

The HTML part of chapter.html is identical to the HTML part of book.html, except for two lines. Just copy HTML the from above and update lines 35-36. Those lines should now be:

Copy
<h4 class="list-heading"><span>Select a Chapter</span></h4>
<div id="chapter-list" class="list-container numeric-list"></div>

The JavaScript will have more changes.

JavaScript - chapter.html

Just like before, insert the JavaScript right in the HTML file. Most of the JavaScript is below. After the code, we'll discuss some key differences between this code and the code in book.html.

Copy
const bibleChapterList = document.querySelector(`#chapter-list`);
const bibleVersionID = getParameterByName(`version`);
const bibleBookID = getParameterByName(`book`);
const abbreviation = getParameterByName(`abbr`);
let chapterHTML = ``;
if (!bibleVersionID || !bibleBookID) {
  window.location.href = `./index.html`;
}
getChapters(bibleVersionID, bibleBookID).then((chapterList) => {
  chapterHTML += `<ol>`;
  for (let chapter of chapterList) {
    chapterHTML += `<li class="grid"><a class="grid-link" href="verse.html?version=${bibleVersionID}&abbr=${abbreviation}&chapter=${chapter.id}"> ${chapter.number} </a></li>`;
  }
  chapterHTML += `</ol>`;
  bibleChapterList.innerHTML = chapterHTML;
});
document.querySelector(`#viewing`).innerHTML = `${bibleBookID}`;
const breadcrumbsHTML = `
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="book.html?version=${bibleVersionID}&abbr=${abbreviation}">${abbreviation}</a></li>
    <li>${bibleBookID}</li>
  </ul>
`;
breadcrumbs.innerHTML = breadcrumbsHTML;
function getChapters(bibleVersionID, bibleBookID) {
  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 chapters = data.map(({ number, id }) => {
          return { number, id };
        });
        resolve(chapters);
      }
    });
    xhr.open(
      `GET`,
      `https://api.scripture.api.bible/v1/bibles/${bibleVersionID}/books/${bibleBookID}/chapters`
    );
    xhr.setRequestHeader(`api-key`, API_KEY);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

A list of chapters is similar to a list of books. Some minor differences in this code include the HTML to put the list together in lines 14-17 and the URL for the API call.

The getParameterByName and searchButton functions are needed on this page also. The code is exactly the same before so just copy those functions over from the other page.