Skip to content

Instantly share code, notes, and snippets.

@angelr1076

angelr1076/bible-verse-generator.markdown

Created June 13, 2018 17:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save angelr1076/46ac846e12da689441a61c9af903e57b to your computer and use it in GitHub Desktop.
Save angelr1076/46ac846e12da689441a61c9af903e57b to your computer and use it in GitHub Desktop.
Download ZIP
Bible Verse Generator
Raw
index.html
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bible Quotes</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Cinzel|Pacifico|Shadows+Into+Light" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="./css/bible-quotes.css" />
</head>
<body>
<div class="container">
<h1>Bible Verse Generator</h1>
<div class="bible-image">
<img src="http://res.cloudinary.com/angelrodriguez/image/upload/v1521115276/IMG_3334.png" class="bible-image" alt="bible book" height="202" width="202">
</div>
<div class="quote-sect">
<div id="quote">Quote</div>
<div id="author">Author</div>
</div>
<div class="quote-buttons">
<div id="get-quote">Verse</div>
<a id="tweet" href="https://twitter.com/intent/tweet/?text=">Tweet!</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./js/bible-quotes.js"></script>
</body>
</html>
Raw
script.js
$(document).ready(function() {
//function to call a quote and bible verse
function getNewQuote() {
console.log(getNewQuote);
$.ajax({
type: "GET",
url: "https://uncovered-treasure-v1.p.mashape.com/random",
data: {},
dataType: "json",
success: function displayQuote(data) {
//display the quote
$("#quote").text(data.results[0].text);
//display the book the bible verse is being taken from
$("#author").text("-" + data.results[0].context);
$("#tweet").attr("href", "https://twitter.com/intent/tweet?text=" + '"' + data.results[0].text + '"' + ' ' + ' -' + ' ' + data.results[0].context).attr('target', '_blank');
},
//error message to display if the call does not work
error: function() {
prompt("Try again, God is on your side.");
},
//Mashape authorization and key
beforeSend: function setHeader(xhr) {
xhr.setRequestHeader(
"X-Mashape-Key",
"yWj9n9u3HdmshPYY3CZIzxRlfyczp1sh5gmjsnsAaGgE4pk62a"
);
xhr.setRequestHeader("Accept", "application/json");
}
});
}
$("#get-quote").click(getNewQuote);
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Raw
style.css
body {
/* background-color: rgb(102, 168, 194);
*/
display: grid;
background: url("http://res.cloudinary.com/angelrodriguez/image/upload/v1521297089/873934-christian-background-images-2234x1338-macbook.jpg");
background-size: cover;
/* background-position: full; */
/* background: url("http://res.cloudinary.com/angelrodriguez/image/upload/v1521228264/Christian-Cemetery-Powerpoint-Backgrounds.jpg"); */
/* background-size: 1600px; */
}
.container {
display: grid;
font-style: bold;
/* sans-serif; */
grid-template-columns: repeat(4, minmax(50px, 1fr));
grid-template-rows: repeat(3, minmax(50px, 1fr));
grid-gap: 5px;
color: rgb(139, 92, 112);
padding: 5px;
text-align: center;
}
h1 {
display: grid;
color: black;
font-family: 'Pacifico',
cursive;
/* font-family: 'Shadows Into Light',
cursive; */
/* font-family: 'Cinzel', serif; */
font-size: 4em;
justify-content: center;
align-content: center;
grid-column: 2 / 4;
grid-row: 1 / 2;
}
.bible-image {
display: grid;
grid-column: 2 / 4;
grid-row: 2 / 3;
justify-content: center;
align-content: center;
-webkit-animation: spin 13s linear infinite;
-moz-animation: spin 10s linear infinite;
animation: spin 13s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.quote-sect {
display: grid;
grid-column: 1 / -1;
grid-row: 3 / 4;
}
#quote {
display: grid;
font-family: 'Shadows Into Light', cursive;
/* font-family: 'Cinzel',
serif; */
font-size: 30px;
color: black;
grid-column: 1 / 2;
grid-row: 1 / 2;
align-content: center;
justify-content: center;
text-align: center;
}
#author {
display: grid;
font-family: 'Shadows Into Light', cursive;
/* font-family: 'Cinzel',
serif; */
font-size: 20px;
color: black;
grid-column: 1 / 2;
grid-row: 2 / 3;
align-content: center;
justify-content: center;
}
.quote-buttons {
display: grid;
grid-column: 1/ -1;
grid-row: 4 / -1;
grid-template-columns: repeat(6, minmax(50px, 1fr));
grid-template-rows: repeat(4, minmax(50px, 1fr));
}
#get-quote {
display: grid;
/* font-family: 'Cinzel',
serif; */
font-family: 'Shadows Into Light',
cursive;
font-size: 2em;
grid-column: 2 / 3;
grid-row: 1 / 2;
text-align: center;
align-content: center;
justify-content: center;
color: white;
background: black;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc;
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
#get-quote:hover {
background-color: powderblue;
transition: background-color 1.0s;
}
#get-quote:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
#tweet {
display: grid;
/* font-family: 'Cinzel',
serif; */
font-family: 'Shadows Into Light',
cursive;
text-decoration:none;
font-size: 2em;
grid-column: 5 / 6;
grid-row: 1 / 2;
text-align: center;
color: white;
align-content: center;
justify-content: center;
background: black;
border-radius: 5px;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
/* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;
/* Firefox 3.5 - 3.6 */
box-shadow: 3px 3px 5px 6px #ccc;
/* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
#tweet:hover {
background-color: lightblue;
transition: background-color .5s;
}
#tweet:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment