cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<head>
  <meta charset="UTF-8" />
  <title>Quote Generator</title>
  <script type="text/javascript" src="jquery-3.1.0.min.js"></script>    
  <link rel="stylesheet" type="text/css" href="quoteGenerator.css">
  <!--FONT AWESOME CDN-->
  <script src="https://use.fontawesome.com/c7e7b33a87.js"></script>
</head>
<body>
  <div id="container" class ="delayBackgroundColor">
    <div id="quoteBox">
      <p id="quote" class="delayTextColor"></p>
      <p id="author" class="delayTextColor"></p>
      <button id ="quoteBtn" class="button delayBackgroundColor" >New Quote</button>
      <!--add icon Image for twitter sharing-->
      <div id="twitterButton">  
        <button id="tweetBtn" class="button delayBackgroundColor"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></button>    
      </div>
    </div><!--end of quoteBox-->
    
    <div id="footerContainer">
      <a href="https://codepen.io/serg_92/" id="footerLink">by Sergio</a>
    </div><!-- end of footer container-->
  </div><!-- end of  page container -->
</body>
</html>
            
          
!
            
              body{
  margin: 0; 
  padding: 0; 
   
}

#container{
    font-family: "Arial", serif;
    background-color: #4169e1; 
    color: #4169e1;
    min-width: 400px;
    width: auto; 
    height: 800px;
    margin: 0;
    padding: 0; 
     
}

#quoteBox{
    background-color: white;
    /* WORKAROUND TO GET THE QUOTEBOX TO STRETCH WITH PAGE */
    text-align: center;
    position: relative;
    top: 30%;
    right: -20%;
    width: 50%;
    height: auto;
    padding: 45px;
    border-radius: 20px;
    

    
    
}

#quote {
    font-size: 22px;
}

#author{
    font-size: 22px; 
    text-align: right;
    font-style: italic; 
}

/*CUSTOMIZE BUTTON CLASS*/
.button {
    font-size: 15px;
    padding: 7px;
    margin: 5px;
    border-radius: 4px; 
    background-color: #4169e1;
    color: #ffffff; 
    border:none; 
    position: relative;
    bottom: 8px;
        float: left;
}

.button:focus{
    outline: 0;
}
.button:hover {
cursor: pointer;
background-color: #25439f;
}

/*CUSTOMYIZE TWITTER BTN*/
blockquote.twitter-tweet p {
  font: normal 18px/24px Georgia, "Times New Roman", Palatino, serif;
  margin: 0 5px 10px 0;
}
 
blockquote.twitter-tweet a[href^="https://twitter.com"] {
  font-weight: normal;
  color: #666;
  font-size: 12px;
    margin: 0 auto;
    
}

#twitterButton {
    width: 78px;
    position: relative;
    float: right;
}

#footerLink {
    font-size: 12px;
    text-decoration: none; 
    color: white;
    
}

#footerContainer {
    color:white;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 30%;
}
/*DELAY BACKGROUND AND TXT COLOR*/
.delayBackgroundColor{
    -webkit-transition:background 3s;
    -moz-transition:background 3s;
    -o-transition:background 3s;
    transition:background 3s; 
}

.delayTextColor{
    -webkit-transition:color 3s; 
    -moz-transition:color 3s; 
    -o-transition:color 3s; 
    transition:color 3s; 
}
            
          
!
            
              
var quotes = {
                author: ["Thomas A. Edison", "George Bernard Shaw", "Charles Darwin", "Ray Goforth","Winston Churchill","Walt Disney","Richard L. Evans","Mary Manin Morrissey","Maxwell Maltz","Harrison Ford","Kevin Ngo","Gandhi","Maya Angelou","Jim Rohn","J.P. Morgan","Mark Zuckerberg"],
                quote: ["Many of life’s failures are people who did not realize how close they were to success when they gave up.",
                        "Success does not consist in never making mistakes but in never making the same one a second time.",
                        "It is not the strongest of the species that survive, nor the most intelligent, but the one most responsive to change.",
                        "There are two types of people who will tell you that you cannot make a difference in this world: those who are afraid to try and those who are afraid you will succeed.",
                        "Success is walking from failure to failure with no loss of enthusiasm.",
                        "All our dreams can come true if we have the courage to pursue them.",
                        "Don’t let life discourage you; everyone who got where he is had to begin where he was.",
                        "Don’t wait for something big to occur. Start where you are, with what you have, and that will always lead you into something greater.",
                        "Often the difference between a successful person and a failure is not one has better abilities or ideas, but the courage that one has to bet on one’s ideas, to take a calculated risk – and to act.",
                        "I realized early on that success was tied to not giving up. Most people in this business gave up and went on to other things. If you simply didn’t give up, you would outlast the people who came in on the bus with you.",
                        "If you don’t make the time to work on creating the life you want, you’re eventually going to be forced to spend a LOT of time dealing with a life you DON’T want.",
                        "If I have the belief that I can do it, I shall surely acquire the capacity to do it even if I may not have it at the beginning.",
                        "If you don’t like something, change it. If you can’t change it, change your attitude.",
                        "Formal education will make you a living; self-education will make you a fortune.",
                        "The first step towards getting somewhere is to decide that you are not going to stay where you are.",
                        "In a world that’s changing really quickly, the only strategy that is guaranteed to fail is not taking risks."]
            };

//ARRAY OF SELECTED HEX COLORS
var colorArray = ["#003F87","#006B54","#0099CC","#00C78C","#2B2B2B","#2F4F4F","#302B54","#55141C","#8968CD","#8A360F","#8B3A3A","#C65D57"];

//GENERATE A RANDOM NUMBER OF THE SIZE OF ARRAY
function randomQuote(){
            var randomNumber = Math.floor((Math.random() * quotes.quote.length));
            return randomNumber; 
            }

//GENERATE RANDOM COLOR THEMES 
function randomColorGenerator(){
  var randomColor = Math.floor((Math.random() * colorArray.length));
  return randomColor;
}
//FUNCTIONS FROM FFC 
function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }
//MAKE NEW TWITTER WINDOW
function openURL(url){
  window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
}

//PLACE QUOTE BEFORE CLICKING BUTTON
var currentQuote = quotes.quote[randomQuote()];
            $("#quote").html('"'+currentQuote+'"'); 
            var currentAuthor = quotes.author[randomQuote()];
            $("#author").html('-' + currentAuthor);
//ADD CLICK LISTENER TO QUOTE BUTTON
$("#quoteBtn").click(function(){
  //UPDATE QUOTE EVERYTIME BTN IS CLICKED
  currentQuote = quotes.quote[randomQuote()];
  $("#quote").html('"'+currentQuote+'"');
  currentAuthor = quotes.author[randomQuote()];
  $("#author").html('-'+ currentAuthor);
  //UPDATE CSS COLORS
  var newColor = colorArray[randomColorGenerator()];
  $("#container").css("background-color", newColor);
  $("#quote").css("color", newColor);
  $("#author").css("color", newColor);
  $(".button").css("background-color", newColor);

});
//ADD CLICK LISTENER TO TWEET BUTTON 
$("#tweetBtn").click(function(){
  if(!inIframe()){
    openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + '"' + currentQuote + '"');
  } 
});


            
          
!
999px
Loading ..................

Console