Quote Generator v2

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

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Quote Generator v2</title>
  
  
  <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">
  <div class="jumbotron">
    <h2 class="text-center">Random Quote Generator</h2>
    <hr>
    <p class="quote text-center">Click a button for a Quote!</p>
    <hr>
    <p class="text-center" id="author">Author</p>
    <hr>
    <div class="row">
      <div class="col-xs-3">
        <p class="text-center einstein">Einstein</p>
      </div>
      <div class="col-xs-3">
        <p class="text-center gandhi">Gandhi</p>
      </div>
      <div class="col-xs-3">
        <p class="text-center confucius">Confucius</p>
      </div>
       <div class="col-xs-3">
        <p class="text-center mandela">Mandela</p>
      </div>
    </div><!--Ends Row-->
    <div class="row">
      <div class="col-xs-6">
        <p class="text-center background">Background Color</p>
      </div>
      <div class="col-xs-6">
        <p class="text-center tweet">Tweet It!</p></div>
    </div><!--Ends Row-->
  </div><!--Closes Jumbotron-->
</div><!--Closes Container-->
  <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/Cylthus/quote-generator-v2-zNKdqa */
@import url('https://fonts.googleapis.com/css?family=Overpass+Mono');
body, html{
  background-color:grey;
  min-width:540px;
}
.changeBG{
   transition: background-color 0.5s ease;
}
.jumbotron{
  background-color: white;
  margin-top:20px;
  box-shadow: 10px 10px 5px;
}
h2{
  font-family:candara;
}

.col-xs-3 p{
  color:white;
  background-color:black;
  cursor:pointer;
  border-radius:50%;
  font-size:20px;
}
.col-xs-3 p:hover {
  background-color:grey;
}
#author{
  margin:none;
  padding:none;
  font-size:15px;
  font-family: 'Overpass Mono', monospace;
}
.background{
  background-color:grey;
  color:white;
}
.background:hover{
  background-color:#15317E;
  cursor:pointer;
}
.tweet{
  background-color:grey;
  color:white;
}
.tweet:hover{
  background-color:#15317E;
  cursor:pointer;
}
.quote{
  font-family: 'Overpass Mono', monospace;
}

/*Downloaded from https://www.codeseek.co/Cylthus/quote-generator-v2-zNKdqa */
$(document).ready(function(){

  var einsteinQuotes = [
                        "\"Look deep into nature, and then you will understand everything better.\"",
                        "\"Try not to become a man of success, but rather try to become a man of value.\"",
                        "\"The true sign of intelligence is not knowledge but imagination.\""
                       ];
  var gandhiQuotes = [
                      "\"You must be the change you wish to see in the world.\"",
                      "\"The weak can never forgive. Forgiveness is the attribute of the strong.\"",
                      "\"Happiness is when what you think, what you say, and what you do are in harmony.\""
                     ];
  var confuciusQuotes = [
                        "\"Everything has its beauty, but not everyone sees it.\"",
                        "\"It does not matter how slowly you go so long as you do not stop.\"",
                        "\"I hear and I forget. I see and I remember. I do and I understand.\""
                        ];
  var mandelaQuotes = [
                      "\"Education is the most powerful weapon which you can use to change the world.\"",
                        "\"It always seems impossible until it's done.\"",
                        "\"A good head and a good heart are always a formidable combination.\""
                      ];
  var colors = ['#a88c8c'
               ,'#9aa88c',
               '#8ca8a8',
               '#9a8ca8',
               '#aaaaaa'];
  var previousQuote = 0;
  
  
  $(".einstein").on("click", function getEinsteinQuote(){
    var quoteNumber = Math.floor(Math.random()*3);
    if(previousQuote === quoteNumber)
      {
        getEinsteinQuote();
      }
    else{
      $('.quote').fadeOut(500, function(){
        $(".quote").text(einsteinQuotes[quoteNumber]).hide().fadeIn(500);
        previousQuote = quoteNumber;
        $('#author').text(" ~Albert Einstein").hide().fadeIn(500);
                        });
       $(".tweet").unbind("click").click( function () { window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(einsteinQuotes[quoteNumber] + "~Einstein")); });
    }
  });
  $(".gandhi").on("click", function getGandhiQuote(){
    var quoteNumber = Math.floor(Math.random()*3);
    if(previousQuote === quoteNumber)
      {
        getGandhiQuote();
      }
    else{
      $('.quote').fadeOut(500, function(){
        $(".quote").text(gandhiQuotes[quoteNumber]).hide().fadeIn(500);
        previousQuote = quoteNumber;
        $('#author').text("~Mahatma Gandhi").hide().fadeIn(500);
                        });
       $(".tweet").unbind("click").click( function () { window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(gandhiQuotes[quoteNumber]+" ~Gandhi")); });
      
      
    }
  });
  
  $(".confucius").on("click", function getConfuciusQuote(){
    var quoteNumber = Math.floor(Math.random()*3);
    if(previousQuote === quoteNumber)
      {
        getConfuciusQuote();
      }
    else{
      $('.quote').fadeOut(500, function(){
        $(".quote").text(confuciusQuotes[quoteNumber]).hide().fadeIn(500);
        previousQuote = quoteNumber;
        $('#author').text("~Confucius").hide().fadeIn(500);
                        });
       $(".tweet").unbind("click").click( function () { window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(confuciusQuotes[quoteNumber]+" ~Confucius")); });
      
      
    }
  });
  
  $(".mandela").on("click", function getMandelaQuote(){
    var quoteNumber = Math.floor(Math.random()*3);
    if(previousQuote === quoteNumber)
      {
        getMandelaQuote();
      }
    else{
      $('.quote').fadeOut(500, function(){
        $(".quote").text(mandelaQuotes[quoteNumber]).hide().fadeIn(500);
        previousQuote = quoteNumber;
        $('#author').text("~Nelson Mandela").hide().fadeIn(500);
                        });
       $(".tweet").unbind("click").click( function () { window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent(mandelaQuotes[quoteNumber]+" ~Mandela")); });
    }
    
  });
  
  $('.background').on("click", function colorChange(){
    var color = Math.floor(Math.random()*colors.length);
    var currentColor = 0;
    if(currentColor === color)
      {
        colorChange();
      }
    else{
      $('html body').toggleClass('changeBG');
      $('html body').css("background-color", colors[color]);
      color = currentColor;
       
    }
  })
})

Comments