Getting a specific verse

We are at the end of the chain where we finally get to see a single verse!

HTML - verse-selected.html

In verse-selected.html, update the section between the div tags with class subheadings with:

Copy
<h3 id="viewing"><span id="verse"></span></h3>

And update the section between the main tags with:

Copy
<div id="verse-content" class="verse-container"></div>

Make sure you are still linking to the fumsv2.min.js JavaScript file.

##JavaScript - verse-selected.html

Copy
const bibleVerseTitle = document.querySelector(`#verse`);
const bibleVerseList = document.querySelector(`#verse-content`);
const bibleVersionID = getParameterByName(`version`);
const bibleVerseID = getParameterByName(`verse`);
const abbreviation = getParameterByName(`abbr`);
if (!bibleVersionID || !bibleVerseID) {
  window.location.href = `./index.html`;
}
getSelectedVerse(bibleVersionID, bibleVerseID).then(
  ({ content, reference }) => {
    bibleVerseTitle.innerHTML = `<span><i>${reference}</i></span>`;
    bibleVerseList.innerHTML = `<div class="eb-container">${content}</div>`;
  }
);
let [book, chapter, verse] = bibleVerseID.split(`.`);
if (bibleVerseID.includes(`-`)) {
  verse =
    bibleVerseID.split(`-`).shift().split(`.`).pop() +
    `-` +
    bibleVerseID.split(`-`).pop().split(`.`).pop();
}
const breadcrumbsHTML = `
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="book.html?version=${bibleVersionID}&abbr=${abbreviation}">${abbreviation}</a></li>
    <li><a href="chapter.html?version=${bibleVersionID}&abbr=${abbreviation}&book=${book}">${book}</a></li>
    <li><a href="verse.html?version=${bibleVersionID}&abbr=${abbreviation}&chapter=${book}.${chapter}">${chapter}</a></li>
    <li>${verse}</li>
  </ul>
`;
breadcrumbs.innerHTML = breadcrumbsHTML;
function getSelectedVerse(bibleVersionID, bibleVerseID) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.addEventListener(`readystatechange`, function () {
      if (this.readyState === this.DONE) {
        const response = JSON.parse(this.responseText);
        const fumsId = response.meta.fumsId;
        const { content, reference } = response.data;
        const verse = { content, reference };
        _BAPI.t(fumsId);
        resolve(verse);
      }
    });
    xhr.open(
      `GET`,
      `https://api.scripture.api.bible/v1/bibles/${bibleVersionID}/verses/${bibleVerseID}?include-chapter-numbers=false&include-verse-numbers=false`
    );
    xhr.setRequestHeader(`api-key`, API_KEY);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

You should be getting the hang of this by now! Some things to notice:

• In lines 16-19, we get the book abbreviation, chapter, and verse all from the verse ID.
• In lines 38-44, we parse the exact data we need from the API results, as well as handle the FUMS data.

On this page, include the getParameterByName and searchButton functions from before."