Inspirational Quote Generator

index.html

<div class="container-fluid background-image:url(http://www.wpaperhd.com/uploads/originals/2016/02/26/motivation-inscriptions-hard-work-pX2Q.jpg);" id="background">
   <center>
      <div class="row container-fluid btn-group" id="top-btn-group">
      <a href="https://twitter.com/intent/tweet" target="_blank"><i class="fa fa-2x fa-twitter-square" aria-hidden="true"></i></a>
      <a href="https://www.facebook.com/sharer/sharer.php?" target="_blank"><i class="fa fa-2x fa-facebook-official" aria-hidden="true"></i></a>
      <a href="https://plus.google.com/share?" target="_blank"><i class="fa fa-2x fa-google-plus-square" aria-hidden="true"></i>
      <i class="fa fa-2x fa-tumblr-square" aria-hidden="true"></i>
      <a href="https://www.pinterest.com/pin/create/button/" target="_blank"><i class="fa fa-2x fa-pinterest-square" aria-hidden="true"></i></a>
         </div>
      
      <div class="row container-fluid well">
      <h1>FIND YOUR INSPIRATION</h1>
         
         <div class="container-fluid">
         <h2 id="qoute-words">...</h2>
         </div>
            <div class="container-fluid">
            <h3 id="quote-author">...</h3>
         </div>
      </div>
   
      <div class="row container-fluid" id="bottom-btn">
         <button class="btn btn-info btn-sm" id="getQuote">Motivate Me!</button>
         </div>
   </center>
   </div>

Inspirational Quote Generator.markdown

Inspirational Quote Generator

A random quote generator than generates inspirational quotes for your viewing pleasures. If you like a quote feel free to share it with the world! --still has a couple bugs to work out--

A Pen by Tyler Moore on CodePen.

License.

script.js

$(document).ready(function() {   
   // Gets an random quote-author pair, & random background image from 2 JSON data files.
   // Then displays each inside an html element.

   $("#getQuote").on("click", function() {
      
      $.getJSON("https://s3-us-west-2.amazonaws.com/s.cdpn.io/581149/quoteData.json", function(json) {
         var randIndex = [Math.floor(Math.random() * 121)];
         
         var quoteText = json[randIndex].quote;
         $("h2").text(quoteText);
         console.log(quoteText);
         
         var authorText = json[randIndex].author;
         $("#quote-author").text(authorText);
         console.log(authorText);
      });
      
      
      $.getJSON("https://s3-us-west-2.amazonaws.com/s.cdpn.io/581149/backgroundData.json", function(json2) {
         var background = json2[Math.floor(Math.random() * 77)];
         var backgroundText = "url(" + background + ")";
         $("#background").css("background-image", backgroundText);
         console.log(backgroundText);
         });
      });
   });

scripts

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

style.scss

* {
    box-sizing: border-box;
}
body {
   margin: 0; height: 100%; overflow: hidden
}
.well {
   width: 80%;
   margin: auto;
   margin-top: 8%;
   position: relative;
   border-style: double, groove;
   border-width: medium;
   border-color: rgb(0, 180, 100);
   background-color:rgba(0, 0, 0, 0.8);
   background-position: center;
   background-size: cover;
}
#bottom-btn {
   margin-top: 2%;
}
#top-btn-group {
   padding: 5px 10px; margin-top: 20px; border: solid 1px #08f; border-radius: 10px
}
.fa {
   color: #08f;
}
h1 {
   text-decoration: underline;
   text-shadow: -2px -1px 10px #00f;
   margin: auto;
   color: rgb(10, 255, 0);
   font-family: Brush Script MT,cursive, arial;
   font-size: 22px;
}
h2 {
   font-family: 'Open Sans', sans-serif; font-size: 20px; color: #fff; text-shadow: 0px 0px 10px #000
}
h3{
   font-size: 18px; color: #fff; text-shadow: -2px -2px 10px #0f0;
}
#background {
   background-image: url(http://www.wpaperhd.com/uploads/originals/2016/02/26/motivation-inscriptions-hard-work-pX2Q.jpg);
   background-repeat: none;
   background-size: cover;
   padding: auto; width: auto; height: 800px;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* Styles */
}

/* iPad 3 (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPad 3 (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
  /* Styles */
}

/* iPhone 4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 5 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 5 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6 (landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6 (portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ (landscape) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ (portrait) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* Samsung Galaxy S3 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* Samsung Galaxy S3 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* Samsung Galaxy S4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S5 (landscape) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

/* Samsung Galaxy S5 (portrait) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {
  /* Styles */
}

styles

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