Skip to content

Instantly share code, notes, and snippets.

@KBPsystem777
Created November 20, 2017 13:25
Show Gist options
  • Save KBPsystem777/f17fa08cf9d6649464605819d4191310 to your computer and use it in GitHub Desktop.
Save KBPsystem777/f17fa08cf9d6649464605819d4191310 to your computer and use it in GitHub Desktop.
random-quote-machine
<html lang="en">
<head>
<title>KBPsystem | Quote Generator</title>
<link href="style.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font Awesome-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="https://kbpsystem777.github.io/Shot/favicon.ico">
<!--Bootstrap-->
<link href="bootstrap.min.css" rel="stylesheet">
<!--Google Fonts-->
<style>
@import url('https://fonts.googleapis.com/css?family=Spectral+SC:300');
</style>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet">
<!--JQUERY-->
<link href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
<!--javascript file-->
<script src="javascript.js"></script>
</head>
<!--body-->
<body class="container-fluid kbpbody">
<div class="container-fluid">
<div>
<h1 class="text-center"><b><i class="fa fa-free-code-camp"></i> Random Quote Machine</h1></b>
<h5 class="text-center">https://www.freecodecamp.org/challenges/build-a-random-quote-machine</h5><br>
</div>
<div class="container">
<div class="container">
<div class="quoteoutput">
<div id="quoteDisplay" class="text-center">Click to Generate Game Of Thrones Inspired Quotes...</div><br>
</div>
</div>
</div><br>
<div class="container">
<div class="row">
<div class="button-style text-center">
<button id="fixedbutton" class="btn btn-primary btn-hover" onclick="newQuote()">
<i class="fa fa-cogs"></i> Generate New Quote</button>
<button id="fixedbutton" class="btn btn-primary btn-center btn-hover" onclick="tweetThis()">
<i class="fa fa-twitter"></i> Tweet This!!</button>
</div>
</div>
</div>
</div>
</body>
<div class="row" id="kbpfooter">
<footer class="caption text-center"><br>
<h5 class="kbptxt">Coded By: Koleen BP</h5>
<div class="row">
<button class="btn"><a href="https://github.com/kbpsystem777"><i class="fa fa-github"></i> github</a></button>
<button class="btn"><a href="https://www.linkedin.com/in/kbpsystem/"><i class="fa fa-linkedin"></i> linkedin</a></button>
<button class="btn"><a href="https://www.twitter.com/kbpsystem"><i class="fa fa-twitter"></i> twitter</a></button>
<button class="btn"><a href="https://www.gitlab.com/kbpsystem"><i class="fa fa-gitlab"></i> gitlab</a></button>
</div>
</footer>
</div>
</html>
//Quotes list
var quotes = [
"Death is the enemy. The enemy always wins, but we still need to fight. - Berric Dondarion",
"When people ask you what happened here, tell them the North remembers. Tell them winter came for House Frey. - Arya Stark",
"Information is the key. You need to learn your enemies\'\ strengths and strategies. You need to learn which of your friends are not your friends. - Varys",
"Money buys a man's silence for a time. A bolt in the heart buys it forever. - Petyr Baelish",
"It's not easy being drunk all the time. If it were easy, everyone would do it. - Tyrion Lannister",
"Chaos isn't a pit. Chaos is a ladder. Many who try to climb it fail and never get to try again. - Petyr Baelish",
"A dragon is not a slave. - Daenarys Targaryen",
"There is a beast in every man and it stirs when you put a sword in his hand. - Jorah Mormont",
"It's the family name that lives on. It's all that lives on. Not your personal glory, not your honor... but family. - Tywin Lannister",
"When you play the game of thrones, you win or you die. - Cersei Lannister",
"The man who passes the sentence should swing the sword. - Ned Stark",
"Never forget what you are, the rest of the world will not. Wear it like armor and it can never be used to hurt you. - Tyrion Lannister",
"I was trying to win the throne to save the kingdom, when I should have been trying to save the kingdom to win the throne - Stannis Baratheon",
"I never asked for this crown. Gold is cold and heavy on the head, but so long as I am the king, I have a duty. If I must sacrifice one child to the flames to save a million from the dark, Sacrifice is never easy, Davos. Or it is no true sacrifice. - Stannis Baratheon",
"Until the sun rises in the west and sets in the east, until the rivers run dry and the mountains blow in the wind like leaves. When my womb quickens again, and I bear a living child. Then you will return, my sun-and-stars, and not before. - Daenarys Targaryen",
"You're the great number of woman I ever imagined. - Daario Naharis",
"The Iron Throne is mine by right. Those who denies it are my foes - Stannis Baratheon",
"The Castle can be rebuilt, in time. It's not the walls that make a lord, it's the man - Stannis Baratheon"
];
//Random Quotes generation
function newQuote() {
var randomNumber = Math.floor(Math.random()*(quotes.length));
//console.log(quotes[randomNumber]);
console.log(randomNumber)
console.log(quotes[randomNumber]);
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}
function tweetThis() {
var tweetMessage = quoteDisplay.textContent;
if (tweetMessage === "Click to Generate Game Of Thrones Inspired Quotes...") {
alert('Generate quotes first before sharing!');
} else {
window.open('https://twitter.com/intent/tweet?text="' + tweetMessage + '"&via=kbpsystem', '_blank');
}
}
//jQuery
$(document).ready(function() {
$(".quoteoutput").css("background-color", "#365cb5");
$(".quoteoutput").css("font-family", "Spectral SC");
$(".btn").css("font-family", "Kaushan Script")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
.kbpbody {
background-color: #3b5998;
color: rgb(223, 220, 220);
};
.button-style {
font-size: 25px;
margin: 0 auto;
float: left;
}
.quoteoutput {
height: 190px;
padding: 45px;
position: center;
font-size: 20px;
}
.kbpfooter {
background-color: black;
}
.btn :hover {
font-weight: bold;
font-size: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://kbpsystem777.github.io/Shot/favicon.ico" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" rel="stylesheet" />
<link href="https://kbpsystem777.github.io/random-quote-machine/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment