Random Quote Generator

index.html

<div class="main">
  <div class="flex1">
    <p><i class="fa fa-quote-left" aria-hidden="true"></i></p>
    <p id="quote" class="quote"></i></p>
    <i class="fa fa-quote-right" aria-hidden="true"></i>
  </div>
  <p id="author" class="author"></p>
  <div class="flex2">
  <i id="tweet" class="fa fa-twitter-square" aria-hidden="true"></i>
  <button id="newQuoteButton" type="button">New quote</button>
  </div>
</div>

<footer>by <a href="https://codepen.io/sayes2x/" id="link" target="_blank">Scott Price</a></footer>

random-quote-generator.markdown

Random Quote Generator

A Pen by Scott on CodePen.

License.

script.js

document.addEventListener('DOMContentLoaded',function() { 
  getQuote();
});

document.getElementById('newQuoteButton').onclick=function(){
  getQuote();
};

document.getElementById('tweet').onclick=function(){
  sendTweet();
}; 

function getQuote() {
  var rndQuote = new XMLHttpRequest();
  var quoteText = ""
  var quoteAuthor = ""
  rndQuote.open("GET",'https://talaikis.com/api/quotes/random/',true); 
  rndQuote.send(); 
  rndQuote.onload=function(){ 
  var json=JSON.parse(rndQuote.responseText);
  quoteText = "<p class='quote'> " + json.quote;
  quoteAuthor = "- " + json.author + "</p>";
  document.getElementsByClassName('quote')[0].innerHTML = quoteText;
  document.getElementsByClassName('author')[0].innerHTML = quoteAuthor;
  };
  changeColor();
}

function changeColor() {
  var colorList = ["BlueViolet", "CadetBlue", "Coral", "CornflowerBlue", "DarkCyan", "DarkOrange", "DarkOrchid", "DarkTurquoise", "DodgerBlue", "FireBrick", "ForestGreen", "GoldenRod", "Green", "Olive", "RoyalBlue", "Teal", "Tomato", "SteelBlue"];
  var color = colorList[Math.floor(Math.random() * 19)];
  document.body.style.backgroundColor = color;
  document.body.style.color = color;
  document.getElementById('newQuoteButton').style.backgroundColor = color;
}

function sendTweet() {
  var tweetAuthor = document.getElementById("author").textContent.slice(2);
  var tweetText = '"' + document.getElementById("quote").textContent + '" ' + tweetAuthor;
  window.open('https://twitter.com/intent/tweet?hashtags=quotes&text=' + tweetText, "_blank");
}

style.css

body {
  background-color: blue;
  color: blue;
  font-family: 'Montserrat', sans-serif;
}
.main {
  background-color: white;
  padding: 25px;
  margin: auto;
  margin-top: 150px;
  width: 550px;
  border-radius: 5px;
}
.quote {
  display: inline;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}
.author {
  text-align: right;
}
.flex1 {
  display: flex;
  font-size: 28px;
}
.flex2 {
  display: flex;
}
.fa-quote-left {
  align-self: flex-start;
}
.fa-quote-right {
  align-self: flex-end;
}
.fa-twitter-square {
  font-size: 42px;
  margin-right: auto;
  cursor: pointer;
}
#newQuoteButton {
  border: none;
  border-radius: 5px;
  padding: 5px 32px;
  color: white;
  background-color: blue;
  cursor: pointer;
}
footer {
  color: white;
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
}
#link {
  text-decoration: none;
  color: white;
}