Getting a specific section

We also need a page to view a specific section. This is linked to from the list of sections.

##HTML - section.html

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

Copy
<h2>Selected section:</h2>
<h3 id="viewing"><span id="section"></span></h3>

And update the section between the main tags with:

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

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

##JavaScript - section.html

Copy
const bibleSectionTitle = document.querySelector(`#section`);
const bibleSectionList = document.querySelector(`#section-content`);
const bibleVersionID = getParameterByName(`version`);
const bibleSectionID = getParameterByName(`section`);
const abbreviation = getParameterByName(`abbr`);
if (!bibleVersionID || !bibleSectionID) {
  window.location.href = `./index.html`;
}
getSelectedSection(bibleVersionID, bibleSectionID).then(
  ({ content, title }) => {
    bibleSectionTitle.innerHTML = `<span><i>${title}</i></span>`;
    bibleSectionList.innerHTML = `<div class="eb-container">${content}</div>`;
  }
);
const [book, section] = bibleSectionID.split(`.`);
const breadcrumbsHTML = `
  <ul>
    <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>${section}</li>
  </ul>
`;
breadcrumbs.innerHTML = breadcrumbsHTML;
function getSelectedSection(bibleVersionID, bibleSectionID) {
  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, title } = response.data;
        const section = { content, title };
        _BAPI.t(fumsId);
        resolve(section);
      }
    });
    xhr.open(
      `GET`,
      `https://api.scripture.api.bible/v1/bibles/${bibleVersionID}/sections/${bibleSectionID}?include-chapter-numbers=true&include-verse-spans=true`
    );
    xhr.setRequestHeader(`api-key`, API_KEY);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

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