michaeljberry/index.html

## index.html
 <body id="content">
   <div id="centerBox">
    <div id="quoteBox">
      <div id="quote">
        <i class="fa fa-quote-left" aria-hidden="true"></i> Nobody puts Baby in a corner.
      </div>
      <div id="quoteNum"></div>
      <div id="author">
        -Dirty Dancing
      </div>
      <div id="buttons">
        <div id="socialDiv">
          <button id="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></button>
        </div>
        <div id="newQuoteDiv">
          <button id="newQuote"><i class="fa fa-step-forward  fa-lg" aria-hidden="true"></i></button>
        </div>
      </div>
    </div>
    <div id="attribution">
      by michael
    </div>
  </div>
</body>

## quotes.markdown

      
    Raw
  

              quotes.markdown
            
          
    Quotes

A Pen by Michael Berry on CodePen.
License.

  
## script.js
$(document).ready(function(){
  $('#newQuote').on('click', function(){
    var currentQuote = $('#quoteNum').text();
    var currentColor = $('#content').css('backgroundColor');
    //console.log(currentColor);
    var currentColorHex = rgbToHex(currentColor);
    //console.log(currentColorHex);
    var color = getRandomColor(JSON.parse(colors), currentColorHex);
    console.log(color);
    $('#buttons button, #content').css('background', color);

    var quote = getRandomQuote(JSON.parse(quotes), currentQuote);
    $('#author').text("- " + quote[0]);
    $('#quote').html('<i class="fa fa-quote-left" aria-hidden="true"></i> ' + quote[1]);
    $('#quoteNum').text(quote[2]);
  });
  $('#twitter').on('click', function(e){
    var quote = $('#quote').text();
    var author = $('#author').text();
    var url = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22" + quote.trim() + "%22%20" + author.trim();
    var win = window.open(url, 'my_window');
    win.focus();
  });
});

function getRandomQuote(quotes, currentQuote){
  var numQuotes = Object.keys(quotes.quotes);
  var randomQuote = numQuotes[Math.floor(Math.random() * numQuotes.length)];
  if(randomQuote == currentQuote){
    return getRandomQuote(quotes, currentQuote);
  }else{
    var quote = [quotes.quotes[randomQuote].author, quotes.quotes[randomQuote].quote, randomQuote];
    return quote;
  }
}

function getRandomColor(colors, currentColor){
  var numColors = Object.keys(colors.colors);
  var ranColor = numColors[Math.floor(Math.random() * numColors.length)];
  var randomColor = colors.colors[ranColor];
  //console.log(randomColor + ' ' + currentColor);
  if(randomColor == currentColor){
    return getRandomColor(colors, currentColor);
  }else{
    return randomColor;
  }
}

function rgbToHex(rgb){
  return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('');
}

var quotes = '{"quotes":[{"author":"Abraham Lincoln", "quote":"The best way to predict the future is to create it."},{"author":"Steve Jobs", "quote":"Let\'s go invent tomorrow instead of worrying about what happened yesterday."},{"author":"JFK", "quote":"Efforts and courage are not enough without purpose and direction."},{"author":"Mahatma Gandhi", "quote":"Live as if you were to die tomorrow. Learn as if you were to live forever."},{"author":"Albert Einstein", "quote":"We cannot solve our problems with the same thinking we used when we created them."}]}';

var colors = '{"colors":["#16A085", "#425262", "#FB6964", "#3DB670", "#342224", "#73A857", "#C4C2A3", "#2C3E50", "#F4A62A"]}';

## scripts
<script src="https://use.fontawesome.com/cdba8f7790.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

## style.css
#content{
  background: #222;
  width: 100%;
  height: 100%;
  transition:2s;
  -webkit-transition:2s;
}
#centerBox{
  margin: 5% auto 0;
  width: 25%;
}
#quoteBox{
  padding: 50px;
  width: 100%;
  min-height: 250px;
  background-color: #fff;
  border-radius: 3px;
  color: #342224;
  font-family: "Helvetica";
  font-size: 14pt;
}
#quote{
  width: auto;
  margin: 10px auto;
  text-align: center;
  font-family: 'Reem Kufi', serif;
  font-size: 20pt;
}
#quoteNum{display:none;}
#author{
  font-size: 14pt;
  float:right;
  font-family: 'Cormorant SC', serif;
}
#buttons{
  clear: both;
  padding-top: 19px;
  margin-bottom: 40px;
}
#socialDiv{
  float:left;
}
#newQuoteDiv{
  float:right;
}
#buttons button{
  background-color: #342224;
  border:none;
  border-radius: 3px;
  color: #fff;
  font-family: 'Heebo', serif;
  min-height: 25px;
  min-width: 30px;
  padding: 10px 15px;
  transition:2s;
  -webkit-transition:2s;
}
#buttons button:hover{
  opacity: 0.9;
}
#attribution{
  color: #fff;
  text-align: center;
}

## styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+SC|Open+Sans|Reem+Kufi|Scope+One|Heebo" rel="stylesheet" />
	<body id="content">
	<div id="centerBox">
	<div id="quoteBox">
	<div id="quote">
	<i class="fa fa-quote-left" aria-hidden="true"></i> Nobody puts Baby in a corner.
	</div>
	<div id="quoteNum"></div>
	<div id="author">
	-Dirty Dancing
	</div>
	<div id="buttons">
	<div id="socialDiv">
	<button id="twitter"><i class="fa fa-twitter fa-lg" aria-hidden="true"></i></button>
	</div>
	<div id="newQuoteDiv">
	<button id="newQuote"><i class="fa fa-step-forward fa-lg" aria-hidden="true"></i></button>
	</div>
	</div>
	</div>
	<div id="attribution">
	by michael
	</div>
	</div>
	</body>
	$(document).ready(function(){
	$('#newQuote').on('click', function(){
	var currentQuote = $('#quoteNum').text();
	var currentColor = $('#content').css('backgroundColor');
	//console.log(currentColor);
	var currentColorHex = rgbToHex(currentColor);
	//console.log(currentColorHex);
	var color = getRandomColor(JSON.parse(colors), currentColorHex);
	console.log(color);
	$('#buttons button, #content').css('background', color);

	var quote = getRandomQuote(JSON.parse(quotes), currentQuote);
	$('#author').text("- " + quote[0]);
	$('#quote').html('<i class="fa fa-quote-left" aria-hidden="true"></i> ' + quote[1]);
	$('#quoteNum').text(quote[2]);
	});
	$('#twitter').on('click', function(e){
	var quote = $('#quote').text();
	var author = $('#author').text();
	var url = "https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=%22" + quote.trim() + "%22%20" + author.trim();
	var win = window.open(url, 'my_window');
	win.focus();
	});
	});

	function getRandomQuote(quotes, currentQuote){
	var numQuotes = Object.keys(quotes.quotes);
	var randomQuote = numQuotes[Math.floor(Math.random() * numQuotes.length)];
	if(randomQuote == currentQuote){
	return getRandomQuote(quotes, currentQuote);
	}else{
	var quote = [quotes.quotes[randomQuote].author, quotes.quotes[randomQuote].quote, randomQuote];
	return quote;
	}
	}

	function getRandomColor(colors, currentColor){
	var numColors = Object.keys(colors.colors);
	var ranColor = numColors[Math.floor(Math.random() * numColors.length)];
	var randomColor = colors.colors[ranColor];
	//console.log(randomColor + ' ' + currentColor);
	if(randomColor == currentColor){
	return getRandomColor(colors, currentColor);
	}else{
	return randomColor;
	}
	}

	function rgbToHex(rgb){
	return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => parseInt(color).toString(16)).join('');
	}

	var quotes = '{"quotes":[{"author":"Abraham Lincoln", "quote":"The best way to predict the future is to create it."},{"author":"Steve Jobs", "quote":"Let\'s go invent tomorrow instead of worrying about what happened yesterday."},{"author":"JFK", "quote":"Efforts and courage are not enough without purpose and direction."},{"author":"Mahatma Gandhi", "quote":"Live as if you were to die tomorrow. Learn as if you were to live forever."},{"author":"Albert Einstein", "quote":"We cannot solve our problems with the same thinking we used when we created them."}]}';

	var colors = '{"colors":["#16A085", "#425262", "#FB6964", "#3DB670", "#342224", "#73A857", "#C4C2A3", "#2C3E50", "#F4A62A"]}';
	<script src="https://use.fontawesome.com/cdba8f7790.js"></script>
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	#content{
	background: #222;
	width: 100%;
	height: 100%;
	transition:2s;
	-webkit-transition:2s;
	}
	#centerBox{
	margin: 5% auto 0;
	width: 25%;
	}
	#quoteBox{
	padding: 50px;
	width: 100%;
	min-height: 250px;
	background-color: #fff;
	border-radius: 3px;
	color: #342224;
	font-family: "Helvetica";
	font-size: 14pt;
	}
	#quote{
	width: auto;
	margin: 10px auto;
	text-align: center;
	font-family: 'Reem Kufi', serif;
	font-size: 20pt;
	}
	#quoteNum{display:none;}
	#author{
	font-size: 14pt;
	float:right;
	font-family: 'Cormorant SC', serif;
	}
	#buttons{
	clear: both;
	padding-top: 19px;
	margin-bottom: 40px;
	}
	#socialDiv{
	float:left;
	}
	#newQuoteDiv{
	float:right;
	}
	#buttons button{
	background-color: #342224;
	border:none;
	border-radius: 3px;
	color: #fff;
	font-family: 'Heebo', serif;
	min-height: 25px;
	min-width: 30px;
	padding: 10px 15px;
	transition:2s;
	-webkit-transition:2s;
	}
	#buttons button:hover{
	opacity: 0.9;
	}
	#attribution{
	color: #fff;
	text-align: center;
	}
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/css?family=Cormorant+SC\|Open+Sans\|Reem+Kufi\|Scope+One\|Heebo" rel="stylesheet" />