Table of Contents
Do you learn how to build a simple Bible explorer using API.Bible? This tutorial will demonstrate how to create an fully-funcitonal website that allows users to select specific chapters and verses from the Bible to read. Also, there is a search feature that allows users to search for verses based on references or keywords.
🔗 View the completed site here.
💻 See the code on GitHub here.
This site will contain the following files:
index.html- User can select a Bible version.
book.html- User can select a book.
chapter.html- User can select a chapter.
verse.html- User can view an entire chapter and select a verse.
verse-selected.html- User can view a selected verse.
search.html- User can search for verses based on references or keywords.
css/main.css- Basic styling.
css/scripture.css- Styling from API.Bible, used to style HTML returned by API.
js/my-key.js- Contains API key.
img/logo.png- The logo!
A key part of getting this sample site to work is an API Key. You can sign up for a key at https://scripture.api.bible/. After you get a key, create a file called
my_key.js in the
js directory and add the code below. 🗝
const API_KEY = `[YOUR KEY HERE]`;
Make sure to replace
[YOUR KEY HERE]with your actual key. 😀