random quote machine

random-quote-machine.html

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<span class="navbar-brand">Random Quote Machine</span>
				</div>
			</div>
		</nav>
		<section id="main">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
						<div id="quote-box">
							<blockquote>
								<div id="quote-txt" class="text-right"></div>
							</blockquote>
							<p id="author" class="text-right"></p>
							<div class="row">
								<div class="col-xs-12 col-sm-5">
									<a id="twitter-btn" target="_blank" class="btn btn-default btn-lg"><i></i> <span>Tweet</span></a>
								</div>
								<div class="col-xs-12 col-sm-5 col-sm-offset-2 text-right">
									<button id="btn_quote" class="btn btn-default btn-lg text-right">New Quote <span class="glyphicon glyphicon-chevron-right"></span></button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>
		<footer>
			<div class="container text-center">
				<div class="row" id="me">
					<p id="pBy"><span class="glyphicon glyphicon-console"></span><span> coded by</span></p><p id="pMe"><a href="https://codepen.io/sinapsis7">Agustin Matumoto</a></p>
				</div>
			</div>
		</footer>

random-quote-machine.markdown

random quote machine

This is a project from https://www.freecodecamp.com The objective: Build a random quote app. #1 User Story: I can click a button to show me a new random quote. #2 User Story: I can press a button to tweet out a quote.

A Pen by Nolan Luna on CodePen.

License.

script.js

//Random color. Thanks to David Merfield. https://randomcolor.llllll.li/
(function(root,factory){if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof exports==="object"){var randomColor=factory();if(typeof module==="object"&&module&&module.exports){exports=module.exports=randomColor}exports.randomColor=randomColor}else{root.randomColor=factory()}})(this,function(){var seed=null;var colorDictionary={};loadColorBounds();var randomColor=function(options){options=options||{};if(options.seed&&options.seed===parseInt(options.seed,10)){seed=options.seed}else if(typeof options.seed==="string"){seed=stringToInteger(options.seed)}else if(options.seed!==undefined&&options.seed!==null){throw new TypeError("The seed value must be an integer")}else{seed=null}var H,S,B;if(options.count!==null&&options.count!==undefined){var totalColors=options.count,colors=[];options.count=null;while(totalColors>colors.length){if(seed&&options.seed)options.seed+=1;colors.push(randomColor(options))}options.count=totalColors;return colors}H=pickHue(options);S=pickSaturation(H,options);B=pickBrightness(H,S,options);return setFormat([H,S,B],options)};function pickHue(options){var hueRange=getHueRange(options.hue),hue=randomWithin(hueRange);if(hue<0){hue=360+hue}return hue}function pickSaturation(hue,options){if(options.luminosity==="random"){return randomWithin([0,100])}if(options.hue==="monochrome"){return 0}var saturationRange=getSaturationRange(hue);var sMin=saturationRange[0],sMax=saturationRange[1];switch(options.luminosity){case"bright":sMin=55;break;case"dark":sMin=sMax-10;break;case"light":sMax=55;break}return randomWithin([sMin,sMax])}function pickBrightness(H,S,options){var bMin=getMinimumBrightness(H,S),bMax=100;switch(options.luminosity){case"dark":bMax=bMin+20;break;case"light":bMin=(bMax+bMin)/2;break;case"random":bMin=0;bMax=100;break}return randomWithin([bMin,bMax])}function setFormat(hsv,options){switch(options.format){case"hsvArray":return hsv;case"hslArray":return HSVtoHSL(hsv);case"hsl":var hsl=HSVtoHSL(hsv);return"hsl("+hsl[0]+", "+hsl[1]+"%, "+hsl[2]+"%)";case"hsla":var hslColor=HSVtoHSL(hsv);return"hsla("+hslColor[0]+", "+hslColor[1]+"%, "+hslColor[2]+"%, "+Math.random()+")";case"rgbArray":return HSVtoRGB(hsv);case"rgb":var rgb=HSVtoRGB(hsv);return"rgb("+rgb.join(", ")+")";case"rgba":var rgbColor=HSVtoRGB(hsv);return"rgba("+rgbColor.join(", ")+", "+Math.random()+")";default:return HSVtoHex(hsv)}}function getMinimumBrightness(H,S){var lowerBounds=getColorInfo(H).lowerBounds;for(var i=0;i<lowerBounds.length-1;i++){var s1=lowerBounds[i][0],v1=lowerBounds[i][1];var s2=lowerBounds[i+1][0],v2=lowerBounds[i+1][1];if(S>=s1&&S<=s2){var m=(v2-v1)/(s2-s1),b=v1-m*s1;return m*S+b}}return 0}function getHueRange(colorInput){if(typeof parseInt(colorInput)==="number"){var number=parseInt(colorInput);if(number<360&&number>0){return[number,number]}}if(typeof colorInput==="string"){if(colorDictionary[colorInput]){var color=colorDictionary[colorInput];if(color.hueRange){return color.hueRange}}}return[0,360]}function getSaturationRange(hue){return getColorInfo(hue).saturationRange}function getColorInfo(hue){if(hue>=334&&hue<=360){hue-=360}for(var colorName in colorDictionary){var color=colorDictionary[colorName];if(color.hueRange&&hue>=color.hueRange[0]&&hue<=color.hueRange[1]){return colorDictionary[colorName]}}return"Color not found"}function randomWithin(range){if(seed===null){return Math.floor(range[0]+Math.random()*(range[1]+1-range[0]))}else{var max=range[1]||1;var min=range[0]||0;seed=(seed*9301+49297)%233280;var rnd=seed/233280;return Math.floor(min+rnd*(max-min))}}function HSVtoHex(hsv){var rgb=HSVtoRGB(hsv);function componentToHex(c){var hex=c.toString(16);return hex.length==1?"0"+hex:hex}var hex="#"+componentToHex(rgb[0])+componentToHex(rgb[1])+componentToHex(rgb[2]);return hex}function defineColor(name,hueRange,lowerBounds){var sMin=lowerBounds[0][0],sMax=lowerBounds[lowerBounds.length-1][0],bMin=lowerBounds[lowerBounds.length-1][1],bMax=lowerBounds[0][1];colorDictionary[name]={hueRange:hueRange,lowerBounds:lowerBounds,saturationRange:[sMin,sMax],brightnessRange:[bMin,bMax]}}function loadColorBounds(){defineColor("monochrome",null,[[0,0],[100,0]]);defineColor("red",[-26,18],[[20,100],[30,92],[40,89],[50,85],[60,78],[70,70],[80,60],[90,55],[100,50]]);defineColor("orange",[19,46],[[20,100],[30,93],[40,88],[50,86],[60,85],[70,70],[100,70]]);defineColor("yellow",[47,62],[[25,100],[40,94],[50,89],[60,86],[70,84],[80,82],[90,80],[100,75]]);defineColor("green",[63,178],[[30,100],[40,90],[50,85],[60,81],[70,74],[80,64],[90,50],[100,40]]);defineColor("blue",[179,257],[[20,100],[30,86],[40,80],[50,74],[60,60],[70,52],[80,44],[90,39],[100,35]]);defineColor("purple",[258,282],[[20,100],[30,87],[40,79],[50,70],[60,65],[70,59],[80,52],[90,45],[100,42]]);defineColor("pink",[283,334],[[20,100],[30,90],[40,86],[60,84],[80,80],[90,75],[100,73]])}function HSVtoRGB(hsv){var h=hsv[0];if(h===0){h=1}if(h===360){h=359}h=h/360;var s=hsv[1]/100,v=hsv[2]/100;var h_i=Math.floor(h*6),f=h*6-h_i,p=v*(1-s),q=v*(1-f*s),t=v*(1-(1-f)*s),r=256,g=256,b=256;switch(h_i){case 0:r=v;g=t;b=p;break;case 1:r=q;g=v;b=p;break;case 2:r=p;g=v;b=t;break;case 3:r=p;g=q;b=v;break;case 4:r=t;g=p;b=v;break;case 5:r=v;g=p;b=q;break}var result=[Math.floor(r*255),Math.floor(g*255),Math.floor(b*255)];return result}function HSVtoHSL(hsv){var h=hsv[0],s=hsv[1]/100,v=hsv[2]/100,k=(2-s)*v;return[h,Math.round(s*v/(k<1?k:2-k)*1e4)/100,k/2*100]}function stringToInteger(string){var total=0;for(var i=0;i!==string.length;i++){if(total>=Number.MAX_SAFE_INTEGER)break;total+=string.charCodeAt(i)}return total}return randomColor});

	//Random Quote script
	$(document).ready(function() {
		var quote, numLast;
		var quotes = [
			{ "quote": "La gratitud es el signo de las almas nobles", "author": "Esopo" },
			{ "quote": "Ningún acto de amabilidad, no importa lo pequeño que sea, se malgasta jamás", "author": "Esopo" },
			{ "quote": "Nunca serás feliz si continúas buscando en qué consiste la felicidad. Nunca vivirás si buscas el significado de la vida", "author": "Albert Camus" },
			{ "quote": "Tienes que aprender las reglas del juego. Luego tienes que jugar mejor que nadie", "author": "Albert Einstein" },
			{ "quote": "Una persona que nunca cometió un error, nunca intentó algo nuevo", "author": "Albert Einstein" },
			{ "quote": "La experiencia no es lo que te ocurre; es lo que haces con lo que te ocurre", "author": "Aldous Huxley" },
			{ "quote": "Errar es humano, perdonar es divino", "author": "Alexander Pope" },
			{ "quote": "Piensa en toda la belleza que aún hay alrededor tuya y se feliz", "author": "Ana Frank" },
			{ "quote": "Ningún hombre que quiera hacer todo por si mismo o llevarse todo el crédito, será un buen líder", "author": "Andrew Carnegie" },
			{ "quote": "Para conseguir grandes cosas, no debemos solo actuar, sino también soñar, no solo planear, sino también creer", "author": "Anatole France" },
			{ "quote": "El tiempo para la acción es ahora. Nunca es demasiado tarde para hacer algo", "author": "Antoine de Saint-Exupery" },
			{ "quote": "Las raíces de la educación son amargas, pero la fruta es dulce", "author": "Aristóteles" },
			{ "quote": "Estoy preparado para lo peor, pero espero lo mejor", "author": "Benjamin Disraeli" },
			{ "quote": "Los buenos tiempos de hoy son los pensamientos tristes del mañana", "author": "Bob Marley" },
			{ "quote": "Si amas la vida, no malgastes el tiempo, porque la vida esta hecha de tiempo", "author": "Bruce Lee" },
			{ "quote": "Para pequeñas criaturas como nosotros la inmensidad es soportable solo a través del amor", "author": "Carl Sagan" },
			{ "quote": "Un día sin risa es un día malgastado", "author": "Charile Chaplin" },
			{ "quote": "Un hombre que se atreve a malgastar una hora de vida no ha descubierto el valor de la vida", "author": "Charles Darwin" },
			{ "quote": "La felicidad no es algo ya hecho. Viene de tus propias acciones", "author": "Dalai Lama" }
		];
		randomQuote();
		$("#btn_quote").click(randomQuote);

		function randomQuote(){
			var num = Math.floor( Math.random() * (quotes.length) );
			var color = randomColor({luminosity: "dark", hue: 'green'});
			if( numLast === num ){
				num = Math.floor( Math.random() * (quotes.length) );
			}
			var twTxt = encodeURI("\""+quotes[num].quote+"\". "+quotes[num].author);
			animate("#quote-box", "quoteBox", 600, 0, "ease-out");
			$("body").css("background-color",color);
			$("#quote-box").css("color",color);
			$("blockquote").css("border-left-color",color);
			$("#quote-txt").html(quotes[num].quote+".");
			$("#author").html("- "+quotes[num].author+" -");
			$("#twitter-btn").attr("href","https://twitter.com/intent/tweet?related=freecodecamp&text="+twTxt);
			numLast = num;
		}
		//animation link footer
		animate("#pBy", "pBy", 400, 1300, "ease-out");
		animate("#pMe", "pMe", 400, 1800, "ease-out");
	});

	//Animation using CSS @keyframes
	animate = function (selector, keyFrameName, duration, delay=0, timing="ease") {
		//jQuery selector; CSS keyframes name; duration in ms; delay in ms;
		$(selector).css({"visibility": "hidden"});
		setTimeout(
			function () {
				$(selector).css({"visibility": "visible"});
				$(selector).css({"animation": keyFrameName+" "+duration+"ms "+timing});
			}, delay
		);
		setTimeout(
			function () {
				$(selector).css({"animation": ""});
			}, delay+duration
		);
	};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.css

body {
				background: #d3dcfc;
				-webkit-transition: background-color 1s ease-in;
				transition: background-color 0.6s ease-in;
			}
			.navbar-brand {
				padding: 0;
				line-height: 50px;
			}
			.navbar-brand img {
				width: 50px;
				height: 50px;
				display: block;
				float: left;
				margin-right: 10px;
			}
			#main {
				padding: 140px 0 20px 0;
			}
			#pMe,#pBy {
				display: inline-block;
				margin-left: 5px;
			}
			#pBy {
				color: #222222;
			}
			#pMe a {
				z-index: -1;
				color: #151515;
				font-weight: bold;
				-webkit-transition: opacity 0.3s ease-in;
				transition: opacity 0.3s ease-in;
			}
			#pMe a:hover {
				opacity: 0.7;
				text-decoration: none;
			}
			#pMe a:visited {
				color: #151515;
			}
			
			@keyframes pMe {
				from { 
					-webkit-transform: translate(-50px,0px); opacity: 0;
					transform: translate(-50px,0px); opacity: 0;
				}
				to { 
					-webkit-transform: translate(0px,0px); opacity: 1;
					transform: translate(0px,0px); opacity: 1;
				}
			}

			@keyframes pBy {
				from { 
					-webkit-transform: translate(0px,-50px); opacity: 0;
					transform: translate(0px,-50px); opacity: 0;
				}
				to { 
					-webkit-transform: translate(0px,0px); opacity: 1;
					transform: translate(0px,0px); opacity: 1;
				}
			}
			/*
			Twitter button
			*/
			#twitter-btn{
				color: #FFFFFF;
				background-color: #1b95e0;
				margin-bottom: 15px;
			}
			#twitter-btn:hover{
				text-decoration: none;
				background-color: #0c7abf;
				-webkit-transition: background-color 0.3s ease-in;
				transition: background-color 0.3s ease-in;
			}
			#twitter-btn i{
				position: relative;
				top: 4px;
				display: inline-block;
				width: 21px;
				height: 21px;
				background: transparent 0 0 no-repeat;
				background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E");
			}
			/*
			random quote style
			*/
			#btn_quote {
				-webkit-transition: background-color 0.5s;
				transition: background-color 0.5s;
			}
			#quote-box {
				font-weight: 400;
				border-radius:5px;
				padding:40px 50px;
				background: #FFFFFF;
			}
			#quote-txt {
				font-family: serif;
				font-weight: 700;
				font-size: 1.3em;
				font-style: italic;
			}
			#author {
				font-family: serif;
				font-size: 1em;
				padding: 0 20px;
				margin-bottom: 30px;
			}
			
			@keyframes quoteBox {
				0%,100% {
					opacity: 1;
				}
				30% {
					transform: rotate(340deg) scale(0,0);
					opacity: 0;
				}
			}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />