A Pen by Rahul gandhi on CodePen.
-
-
Save gandhirahul/4d8ef4670e1ceb1d17344057c67cc55c to your computer and use it in GitHub Desktop.
Random Quote Generator
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' | |
}]; | |
}]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment