Quote Machine

In this example below you will see how to do a Quote Machine with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by alysonalyson, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright alysonalyson ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Quote Machine</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html lang="en">
<head>
  <title>... and I won't quote for nobody but you</title>
   <link href="https://fonts.googleapis.com/css?family=Bungee+Inline|Poiret+One" rel="stylesheet"> 
   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
</head>

<body>

  <!--Begin header div-->
<div class = "container center-block" id ="title-box">
    <p id="subhead">I'm just a<p>
    <p id="headline" => Quote Machine<p>
    <div class = "container" id="icon-row">
      <i class="fa fa-quote-left fa-3x headi" aria-hidden="true"></i> 
      <i class="fa fa-heart fa-3x headi" aria-hidden="true"></i> 
      <i class="fa fa-lightbulb-o fa-4x headi" aria-hidden="true"></i>
      <i class="fa fa-book fa-3x headi" aria-hidden="true"></i> 
      <i class="fa fa-quote-right fa-3x headi" aria-hidden="true"></i> 
       
    </div>
    <p class= "sshead">Dispensing random wisdom on demand.</p>
  </div>
<!--Begin Quote body div-->
   <div class = "container" id="qBox">
     <p id= "quote"><div title= "Share this quote on Twitter!"><a href='https://twitter.com/intent/tweet'><i class="fa fa-twitter fa-2x" id = "tweet" aria-hidden="true"></i></div></p>
     
  </div>
<!--Begin Button div-->
  <div class="container" id= "btn-box">
    <button class ="btn btn-block center-block" id="quote-btn" onclick="quoteMachine()">Hit me with some wisdom</button>
  </div>
</body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/alysonalyson/quote-machine-gRrKVY */
#title-box{
  margin-top: 30px;
}

#subhead {
  font-family: "Poiret One", helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 600;
  color:  #212f3d ;
  text-align: center;
}
#headline {
  font-family: "Bungee Inline", helvetica, sans-serif;
  font-size: 4.5rem;
  text-align: center;
  line-height: 90%;
}
#icon-row{
  border: 5px #90a4ae double;
  background-color: #80deea;
  width: 50%;
  text-align: center;
}
.headi{
  margin-right: 10px;
  margin-left: 10px;
}
.sshead{
  font-family: "Poiret One";
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

#qBox{
  border: 10px #D5D8DC double;
  width: 50%;
  align-items: center; 
  margin-top: 40px;
  padding-top: 20px;
  font-family: "Poiret One";
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}

#tweet{  
  color: #b0bec5;
  text-decoration: none;
}
#tweet:hover{
  color:  #4dd0e1;
  text-decoration: none;
}

#btn-box{
  align-items: center;
  margin-top: 40px;
  width: 50%;
}
#quote-btn {
  border: 3px #4db6ac solid;
  font-family: "Bungee Inline";
  font-size: 2rem;
  font-color: black;
  background-color: #80deea;
}
#quote-btn:hover{
   border: 5px #4db6ac solid;
  font-family: "Bungee Inline";
  font-size: 2rem;
  font-color: black;
  background-color: white;
}
#quote-btn:active{
   border: 5px #4db6ac solid;
  font-family: "Bungee Inline";
  font-size: 2rem;
  font-color: white;
  background-color: #4db6ac;
}

  

/*Downloaded from https://www.codeseek.co/alysonalyson/quote-machine-gRrKVY */
var quotesArr = [
'"I read with every broken heart we should become more adventurous.” <br>- Rilo Kiley',
'“Growing up is losing some illusions, in order to acquire others.”  <br>-Virginia Woolf',
'“I don\’t believe in aging. I believe in forever altering one\’s aspect to the sun. Hence my optimism.” <br> -Virginia Woolf',
'“You can\’t erase what you know. You can\’t forget who you are.” <br> - Sandra Cisneros',
'“You can\'t have it all, all at once. Who—man or woman—has it all, all at once?” <br>- Ruth Bader Ginsburg',
'“I\'m not going to limit myself just because people won\'t accept the fact that I can do something else.” <br> -Dolly Parton',
'“If you don\'t like the road you\'re walking, start paving another one.” <br>-Dolly Parton',
'“Most everything means nothing, except some things that mean everything.” <br> - Patty Griffin',
'“Happiness is not a goal; it is a by-product.” <br>-Eleanor Roosevelt',
'"Have no fear of perfection; you\'ll never reach it." <br>-Marie Curie',
'“In the Bible it says they asked Jesus how many times you should forgive, and he said 70 times 7. Well, I want you all to know that I\'m keeping a chart.” <br>-Hillary Clinton',
'"Luck is a combination of preparation and opportunity. If you\’re prepared and the opportunity comes up, it\’s your good fortune to have been in the right place at the right time." <br>-Katherine Johnson',
'“There is no point at which you can say, ‘Well, I\’m successful now. I might as well take a nap.” <br>-Carrie Fisher',  
'“Resentment is like drinking poison and waiting for the other person to die.”<br> - Carrie Fisher',
'“Perhaps when we find ourselves wanting everything, it is because we are dangerously close to wanting nothing.” <br>- Sylvia Plath',
'“I always wanted to be somebody, but now I realize I should have been more specific.” <br>- Lily Tomlin',
'“Forgiveness means giving up all hope for a better past.”<br> - Lily Tomlin',
'“Confidence is 10% hard work and 90% delusion.” <br>- Tina Fey',
'“To me YES, AND means don\'t be afraid to contribute. Always make sure you\'re adding something to the discussion. Your initiations are worthwhile.”<br> - Tina Fey',
'“However, if you do start crying in an argument and someone asks why, you can always say, \’I\’m just crying because of how wrong you are.\'” <br>- Amy Poehler',
'“Sometimes you just have to put on lip gloss and pretend to be psyched.” <br>- Mindy Kaling',
'“People get scared when you try to do something, especially when it looks like you\'re succeeding. People do not get scared when you\'re failing. It calms them. But when you\'re winning, it makes them feel like they\'re losing or, worse yet, that maybe they should\'ve tried to do something too, but now it\'s too late.” <br>- Mindy Kaling',
'“Happiness comes from living as you need to, as you want to. As your inner voice tells you to. Happiness comes from being who you actually are instead of who you think you are supposed to be.”<br> - Shonda Rhimes',
'“Dreams are lovely. But they are just dreams. Fleeting, ephemeral. Pretty. But dreams do not come true just because you dream them. It\’s hard work that makes things happen. It\’s hard work that creates change.” <br> - Shonda Rhimes',
'“Always stay gracious; best revenge is your paper.” <br>- Beyonce',
'“The reality is, sometimes you lose.”<br> - Beyonce',
'“Enjoy your life. It\’s short. That\’s my message.” <br>- Beyonce',
'“Remind yourself that this very moment is the only one you know you have for sure.” <br>- Oprah Winfrey',
'“Doing the best at this moment puts you in the best place for the next moment.”<br> - Oprah Winfrey',
'“Just don\'t give up trying to do what you really want to do. Where there is love and inspiration, I don\'t think you can go wrong. <br>- Ella Fitzgerald',
'“The spirit is larger than the body. The body is pathetic compared to what we have inside us.” <br>- Diana Nyad',  
'“Isn\’t life about determining your own finish line?”<br> - Diana Nyad',
'“Failure happens all the time. It happens every day in practice. What makes you better is how you react to it.”<br>- Mia Hamm',
'“I am building a fire, and everyday I train, I add more fuel. At just the right moment, I light the match.” <br> - Mia Hamm',
'“If you’\’re doing something outside of dominant culture, there\’s not an easy place for you. You will have to do it yourself.”<br> - Ava DuVernay',
'“When you\’re in your lane, there\’s no traffic.” <br> - Ava DuVernay',  
'“Failure is an important part of your growth and developing resilience. Don\’t be afraid to fail.” <br> - Michelle Obama',  
' “There is no magic to achievement. It\’s really about hard work, choices, and persistence.” - <br>Michelle Obama',
'“Never follow someone else\’s path unless you\’re in the woods and you’re lost and you see a path. By all means, you should follow that.” <br> - Ellen Degeneres', 
'“Be open to learning new lessons, even if they contradict the lessons you learned yesterday.” - Ellen Degeneres',
'“I am pretty fearless, and you know why? Because I don\'t handle fear very well; I\'m not a good terrified person.” <br> - Stevie Nicks',
'“Just get a job, buy your own shit, and stay out of the forest.”<br> - Karen Kilgariff and Georgia Hardstark',
'“Stay sexy, and don\’t get murdered.” <br> - Karen Kilgariff and Georgia Hardstark'
];
//Select a random number, then a random quote
function quoteMachine (){
var ranNum = Math.floor(Math.random()* (quotesArr.length));
var ranQ = quotesArr[ranNum];
document.getElementById("quote").innerHTML = ranQ;
};
//Select HTML elements with jQuery
$('#qBox').hide();
$('#quote-btn').on('click', function(){
  $('#qBox').slideDown();
});

Comments