A Pen by Angel Rodriguez on CodePen.
Created
June 13, 2018 17:17
-
-
Save angelr1076/46ac846e12da689441a61c9af903e57b to your computer and use it in GitHub Desktop.
Bible Verse Generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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