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.
To make things more straight forward for new users, all the JavaScript is going to be in the script tags of the HTML files, instead of in a separate file. This will hopefully make it easier to see how the HTML and JavaScript are connected.
🔗 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!
API Key
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. 🗝
Make sure to replace
[YOUR KEY HERE]with your actual key. 😀
To make things easier to follow along, the API key for this sample site is included in the client-side JavaScript so anyone can see it. This is very insecure because people can easily steal the API key and use it in their own site. The best practice is to only use an API key in server-side JavaScript.