QuoteGenerator

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>QuoteGenerator</title>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  
<div class="container-fluid text-center">
  <h1>Random Quote Generator</h1>
    <p>Inspirational Quotes about music</p>
    
 <img src="https://c8.staticflickr.com/6/5573/30781083455_f582efdf9c.jpg" width="500" height="333" alt="concertHall">
  <br>
  <button class="btn btn-default" id=quoteButton type="submit">New Quote</button>
   <button class="btn btn-default" id=tweet  type="submit"> <i class="fa fa-twitter"></i></button>
  <div class="random-quotes text-center">
    <span class = "quote"></span>
    <span class = "author"></span>
  </div>  
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/BrianBrain/quotegenerator-QGWodg */
body{
  background-color: #4A3D5F;
  color:#FFFFFF;
  font-family: "Times New Roman";
}

p{
  
  font-weight:bold;
  font-size:1.25em;
}

img{
  padding:15px;
  border: solid 10px;
}

button.btn.btn-default{
  background-color: #D8B6ED;
  margin-bottom:10px;
}

.random-quotes{
  background-color:#D8B6ED;
  color:#000000;
  font-size:1.25em;
  width: 25%;
  margin: 0 auto;
  border: solid 7px black;
  border-radius:25%;
  padding:20px;
  height:auto;
}
.quote{
  
}

.author{
  
}



/*Downloaded from https://www.codeseek.co/BrianBrain/quotegenerator-QGWodg */
$(document).ready(function(){
getQuote();
var randomQuote;
 var randomAuthor;

  
                  
function getQuote(){
    
 var quotes=["Music is a moral law. It gives soul to the universe, wings to the mind, flight to the imagination, and charm and gaiety to life and to everything.", "Where words fail, music speaks.", "Music is a higher revelation than all wisdom and philosophy.", "Music is the mediator between the spiritual and the sensual life.", "Music doesn't lie. If there is something to be changed in this world, then it can only happen through music." ];
    
var author =["Plato", "Hans Christian Anderson","Ludwig van Beethoven","Ludwig van Beethoven", "Jimi Hendrix"];

 randomNum= Math.floor((Math.random()*quotes.length));
  
  
    randomQuote = quotes[randomNum];
    randomAuthor = author[randomNum];
    
    
    $(".quote").text(randomQuote);
    $(".author").text(randomAuthor);

  }
  
  $("#quoteButton").on("click", function(){
    getQuote();
  });
    
  $("#tweet").on("click", function(){
    window.open("https://twitter.com/intent/tweet?text=" + randomQuote + randomAuthor);
    
  });
  
});

Comments