Random HarryPotter Quote Generator - Zipline

index.html

<div class="container">
  <div class="top-img"></div>
  <div class="mid-container">
  <div id="quote"></div>
  <div id="author"></div>
  </div>
  <div class="btn">
    <a class="button" id="generate">Generate Quote</a>
    <a class="button" id="tweet"><i class="fa fa-twitter"></i></a>
  </div>
</div>

Random HarryPotter Quote Generator - Zipline.markdown

Random HarryPotter Quote Generator - Zipline

Forked from Dalia's Pen Random HarryPotter Quote Generator - Zipline.

Forked from Dalia's Pen Random HarryPotter Quote Generator - Zipline.

A Pen by Captain Anonymous on CodePen.

License.

script.js

$(document).ready(function(){
  generateQuote();
  
  function generateQuote(){
    var quotes = [["Where your treasure is, there will your heart be also.", "Albus Dumbledore" ], ["Not my daughter, you bitch!", "Molly Weasley" ], ["You think the dead we loved ever truly leave us? You think that we don’t recall them more clearly than ever in times of great trouble? Your father is alive in you, Harry, and shows himself plainly when you have need of him.", "Albus Dumbledore" ], ["Happiness can be found, even in the darkest of times, if one only remembers to turn on the light.", "Albus Dumbledore" ], ["Indeed, your failure to understand that there are things much worse than death has always been your greatest weakness.", "Quote from Dumbledore to Voldermort" ], ["I say there are spots that don’t come off… Spots that never come off, d’you know what I mean.", "Mad-Eye Moody" ], ["Nothing like a nighttime stroll to give you ideas.", "Mad-Eye Moody" ], ["If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.", "Sirius Black" ], ["I sometimes find, and I am sure you know the feeling, that I simply have too many thoughts and memories crammed into my mind…. At these times… I use the Pensieve. One simply siphons the excess thoughts from one’s mind, pours them into the basin, and examines them at one’s leisure.", "Albus Dumbledore" ], ["Curiosity is not a sin… But we should exercise caution with our curiosity… yes, indeed.", "Albus Dumbledore" ], ["In dreams, we enter a world that’s entirely our own.", "Albus Dumbledore" ], ["To the well-organized mind, death is but the next great adventure.", "Albus Dumbledore" ], ["We must try not to sink beneath our anguish, Harry, but battle on.", "Albus Dumbledore" ], ["It is the unknown we fear when we look upon death and darkness, nothing more.", "Albus Dumbledore" ], ["Ah, music. A magic beyond all we do here!", "Albus Dumbledore" ], ["Indifference and neglect often do much more damage than outright dislike …We wizards have mistreated and abused our fellows for too long, and we are now reaping our reward.", "Albus Dumbledore" ], ["People find it far easier to forgive others for being wrong than being right.", "Albus Dumbledore" ], ["It does not do to dwell on dreams and forget to live.", "Albus Dumbledore" ], ["Age is foolish and forgetful when it underestimates youth.", "Albus Dumbledore" ], ["When you have seen as much of life as I have, you will not underestimate the power of obsessive love.", "Albus Dumbledore" ], ["It takes a great deal of bravery to stand up to our enemies, but just as much to stand up to our friends.", "Albus Dumbledore" ], ["Fear of a name increases fear of the thing itself.", "Albus Dumbledore" ], ["You sort of start thinking anything’s possible if you’ve got enough nerve.", "Ginny Weasley" ], ["Hearing voices no one else can hear isn’t a good sign, even in the wizarding world.", "Ron Weasley" ], ["It is our choices… that show what we truly are, far more than our abilities.", "Albus Dumbledore" ], ["Never trust anything that can think for itself if you can’t see where it keeps its brain.", "Arthur Weasley" ], ["As much money and life as you could want! The two things most human beings would choose above all – the trouble is, humans do have a knack of choosing precisely those things that are worst for them.", "Albus Dumbledore" ], ["There is no good or evil: only power and those too weak to seek it.", "Quirinus Quirrell" ], ["The mind is not a book, to be opened at will and examined at leisure. Thoughts are not etched on the inside of skulls, to be perused by an invader. The mind is a complex and many-layered thing.", "Severus Snape" ], ["Indifference and neglect often do much more damage than outright dislike.", "Albus Dumbledore" ], ["The truth is a beautiful and terrible thing, and should therefore be treated with caution.", "Albus Dumbledore" ], ["Youth cannot know how age thinks and feels. But old men are guilty if they forget what it was to be young.", "Albus Dumbledore" ], ["He chose the boy he thought most likely to be a danger to him … and notice this, Harry. He chose, not the pureblood (which according to his creed, is the only kind of wizard worth being or knowing), but the half-blood, like himself. He saw himself in you before he had ever seen you, and in marking you with that scar, he did not kill you, as he intended, but gave you powers, and a future, which have fitted you to escape him not once, but four times so far.", "Albus Dumbledore" ], ["Numbing the pain for a while will make it worse when you finally feel it.", "Albus Dumbledore" ], ["Time is making fools of us again.", "Albus Dumbledore"]];
    
    var randomQuote = Math.floor(Math.random() * quotes.length);
    var selectedQuote =  quotes[randomQuote];
    console.log(selectedQuote);
    $("#quote").text('"'+selectedQuote[0]+'"');
    $("#author").text("—" + selectedQuote[1]);
  }

  $("#generate").click(function(){
    generateQuote();
  });
  
  $("#tweet").click(function(){
    
    window.open('https://twitter.com/intent/tweet?text=' + $('#quote').text() + " " + $('#author').text() , '_blank'); 
  });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

html, body
{
    height: 100%;
}

body{
  background: url('http://www.webdesign.org/img_articles/19030/stagphoto1a.jpg');  
  color: #3E0C10;
  font-family: 'Walter Turncoat', cursive;
  padding: 0px;
  margin: 0px;
  
}

.container{
  margin: 0px;
  background: rgba(255,255,255,0.3);
  text-align: center;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 40px;
  
}

.top-img{
  background-image: url('https://40.media.tumblr.com/5446b47fff53aaac1669203cd1398c7a/tumblr_nyju1y4ldZ1togik8o1_250.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 150px;
  height: 150px;
  align-self: center;
}

.mid-container{
  padding: 20px 15% 20px 15%;
  align-self: center;
}

#quote{
  font-size: 32pt;
  //font-weight: bold;
}

#author{
  font-size: 14pt;
  font-weight: bold;
  font-style: italic;
  float: right;
  margin-top: 20px;
  //margin-left: 40%;
  margin-right: 20px;
}

.btn{
  margin-top: 20px;
}

.button{
  color: white; 
  font-size: 18pt;
  background: #3E0C10;
  border: none;
  padding: 10px 15px;
  border-radius: 3px;
font-family: 'Walter Turncoat', cursive;  text-decoration: none;
  cursor: pointer;
}

.button:hover{
  color: #3E0C10;
  background: transparent;
  padding: 8px 13px;
  border: 2px solid #3E0C10;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />