Random Quote Generator

index.html

<div ng-app="quoteApp" ng-controller="quoteCntrl" class="app-div" ng-cloak>
<div class="column main-content"   ng-style="{'background-color': randomColor.Code}">
  <div class="row" >
      <div class="col-xs-1 col-md-4" >
      </div> 
      
      <div class="col-xs-10 col-md-4 quote-container" >
        <div class="quote-text demo animated slideInDown">
        <span ng-bind="randomQuotes[i].quote"  ng-style="{'color': randomColor.Code}">-</span>
        </div>
        <div class="quote-author demo animated slideInDown">
        <span ng-bind="randomQuotes[i].author"  ng-style="{'color': randomColor.Code}"></span>
        </div>
        <div>  
        <a class="twitter-share-button"
             ng-href="https://twitter.com/intent/tweet?text='{{randomQuotes[i].quote}}-Tweeted via Quote Generator by Rahul Gandhi'"
             target="_new" data-size="large"
             ng-style="{'background-color': randomColor.Code}"
           >
          <i class="fa fa-twitter"></i>
             </a>
        
        <button class="btn btn-primary" 
                ng-click="GenerateRandom()" 
                  ng-style="{'background-color': randomColor.Code}">New Quote
        </button>
        </div>
      </div>  
      
      <div class="col-xs-1 col-md-4" >
      </div>
  </div> 
<footer>Random Quote Generator-Rahul Gandhi</footer>
  </div>
</div>

random-quote-generator.markdown

Random Quote Generator

A Pen by Rahul gandhi on CodePen.

License.

script.js

angular.module('quoteApp', []).
controller('quoteCntrl', ['$scope', function($scope) {
  $scope.randomVar = Math.floor(Math.random() * 10);
  $scope.i = Math.floor(Math.random() * 20);
  $scope.randomColorGen = function() {
    var str = '1234567890ABCDEF';
    var strArr = str.split('');
    var randomColorCode = '#';
    for (var i = 0; i < 6; i++) {
      randomColorCode += strArr[Math.floor(Math.random() * 16)];
    }
    // var returnObj={backgroundColor: randomColorCode};
    // return returnObj;
    return randomColorCode;
  }
  $scope.randomColor = {};
  $scope.randomColor.Code = $scope.randomColorGen();

  $scope.GenerateRandom = function() {
    if ($scope.i == 19)
      $scope.i = -1;
    $scope.i++;
    $scope.randomColor.Code = $scope.randomColorGen();
        
    animate(".demo", 'slideInDown');
    return false;
    
  }
  
  function animate(element_ID, animation) {
        $(element_ID).addClass(animation);
        var wait = window.setTimeout( function(){
            $(element_ID).removeClass(animation)}, 1500
        );
    }

  $scope.randomQuotes = [{
    quote: 'Dont cry because its over, smile because it happened',
    author: 'Dr. Sues',
    color: 'red'
  }, {
    quote: 'I\'m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can\'t handle me at my worst, then you sure as hell don\'t deserve me at my best',
    author: 'Marilyn Monroe',
    color: 'red'
  }, {
    quote: 'Be yourself; everyone else is already taken',
    author: 'Oscar Wilde',
    color: 'red'
  }, {
    quote: 'Two things are infinite: the universe and human stupidity; and I\'m not sure about the universe',
    author: 'Albert Einstein',
    color: 'red'
  }, {
    quote: 'Be who you are and say what you feel, because those who mind don\'t matter, and those who matter don\'t mind.',
    author: ' Bernard M. Baruch',
    color: 'red'
  }, {
    quote: 'You\'ve gotta dance like there\'s nobody watching,Love like you\'ll never be hurt,Sing like there\'s nobody listening,And live like it\'s heaven on earth.”',
    author: 'William W. Purkey',
    color: 'red'
  }, {
    quote: 'You know you\'re in love when you can\'t fall asleep because reality is finally better than your dreams',
    author: 'Dr. Seuss',
    color: 'red'
  }, {
    quote: 'A room without books is like a body without a soul.',
    author: 'Marcus Tullius Cicero',
    color: 'red'
  }, {
    quote: 'So many books, so little time',
    author: ' Frank Zappa',
    color: 'red'
  }, {
    quote: 'You only live once, but if you do it right, once is enough',
    author: 'Mae West',
    color: 'red'
  }, {
    quote: 'Be the change that you wish to see in the world',
    author: 'Mahatama Gandhi',
    color: 'red'
  }, {
    quote: 'In three words I can sum up everything I\'ve learned about life: it goes on',
    author: 'Robert Frost',
    color: 'red'
  }, {
    quote: 'Friendship ... is born at the moment when one man says to another "What! You too? I thought that no one but myself . . .',
    author: 'C.S. Lewis, The Four Loves',
    color: 'red'
  }, {
    quote: '“Don’t walk in front of me… I may not follow , Don\’t walk behind me… I may not lead , Walk beside me… just be my friend',
    author: 'Albert Camus',
    color: 'red'
  }, {
    quote: 'If you want to know what a man\'s like, take a good look at how he treats his inferiors, not his equals',
    author: 'J.K. Rowling, Harry Potter and the Goblet of Fire',
    color: 'red'
  }, {
    quote: 'No one can make you feel inferior without your consent',
    author: 'Eleanor Roosevelt, This is My Story',
    color: 'red'
  }, {
    quote: 'If you tell the truth, you don\'t have to remember anything',
    author: 'Mark Twain',
    color: 'red'
  }, {
    quote: 'A friend is someone who knows all about you and still loves you',
    author: 'Elbert Hubbard',
    color: 'red'
  }, {
    quote: 'Always forgive your enemies; nothing annoys them so much',
    author: 'Oscar Wilde',
    color: 'red'
  }, {
    quote: 'Live as if you were to die tomorrow. Learn as if you were to live forever',
    author: 'Mahatama Gandhi',
    color: 'red'
  }];

}]);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>

style.less

html,body,.app-div{
  height:100%
}// @variable-background
.main-content{
background-color:gray;  
 height:100%;
  .quote-container{
    margin-top: 8%;
    padding:3%;
    background-color:white;
    border-radius: 10px;
    box-shadow: 1px -1px 10px 1px gray;
    .quote-text{
      margin-bottom:5px;
      font-size: 16px;
      line-height: 1.5;
      font-family: cursive;
      font-size:18px;
    }
    .quote-author{
      text-align: right;
      margin-bottom:10px;
      font-size: 18px;
    line-height: 1.5;
    font-family: cursive;
    }
    .twitter-share-button{
      border-radius: 4px;
      margin-bottom: 0;
      margin-right: 20px;
      padding: 8px 6px;
      vertical-align: middle;
      text-decoration: none;
      i{    color:white;
            font-size: 18px;
          margin-left:4px
      }
    }
    .btn-primary{
      outline:0;
      border:0
    }
    .btn-primary:hover{
      border:0;
    }
  }
}
footer{
      margin-top:5px;
      text-align: center;
      color:white;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />