FreeCodeCamp Random Quote Machine

freecodecamp-random-quote-machine.markdown

FreeCodeCamp Random Quote Machine

FreeCodeCamp Random Quote Machine.
I used simple HTML, CSS, Bootsrtap 3.3.7, JavaScript and JSON as instructed.

A Pen by Anastasios Mpoletis on CodePen.

License.

index.html

<!-- /Main container -->
<div class="container">

  <!-- /Title -->
  <div class="container-fluid text-center">
    <h1><i>Random Quote Machine</i></h1>
  </div>
  <!-- ./Title -->

  <!-- /Quote div -->
  <div class="container-fluid text-center">
    <!-- /Quote row -->
    <div class="row quote-div">
      <div class="col-md-12 col-lg-12 quote-col">
        <q>War is where the young and stupid are tricked by the old and bitter into killing each other</q><br/>
        <address>Niko Bellic, GTA IV</address>
      </div>
      <div class="col-md-12 col-lg-12">
        <!-- /Twitter share button -->
        <a class="btn twitter-share-button" href='https://twitter.com/intent/tweet?hashtags=videogamequotes&related=freecodecamp&text="War is where the young and stupid are tricked by the old and bitter into killing each other" - Niko Bellic, GTA IV' data-size="large"
          target="_blank">
          <i class="fa fa-twitter" aria-hidden="true"></i></a>
        <!-- ./Twitter share button -->
      </div>
    </div>
    <!-- ./Quote row -->

    <!-- /New Quote button row -->
    <div class="row">
      <div class="col-md-12 col-lg-12">
        <!-- /New Quote button -->
        <button class="btn btn-default btn-lg" id="quote-button">New Quote</button>
        <!-- ./New Quote button -->
      </div>
    </div>
    <!-- ./New Quote button row -->
  </div>
  <!-- ./Quote div -->

</div>
<!-- ./Main container -->

<!-- /Footer -->
<footer class="text-center">
  <p>Created by <a href="http://anastasiosmpoletis.webege.com" target="_blank"><em>Anastasios Mpoletis</em></a></p>
</footer>
<!-- ./Footer -->

script.js

$(document).ready(function() {
  $("#quote-button").on("click", function() {
    //My custom JSON file
    $.getJSON(
      "https://dl.dropbox.com/s/4b0jnxft0l83rs3/quotesjson.json?dl=0",
      function(json) {
        var htmlQuote = "";
        var twitterQuote = "";
        // Random number (0 - 13 total quotes)
        var random = Math.floor(Math.random() * 13);

        // Quote website displayed
        htmlQuote +=
          "<q>" +
          json[random][0] +
          "</q><br/><address>" +
          json[random][1] +
          "</address>";
        // Quote Twitter displayed
        twitterQuote += '"' + json[random][0] + '" - ' + json[random][1];

        $(".quote-col").html(htmlQuote);
        $(".twitter-share-button").attr(
          "href",
          "https://twitter.com/intent/tweet?hashtags=videogamequotes&related=freecodecamp&text=" +
            twitterQuote
        );
      }
    );
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

@font-face {
  font-family: 'la-cithare';
  src: url("https://dl.dropbox.com/s/ab28ib5wx81uhes/La%20Cithare.ttf?dl=0");
}

body {
  background: url(https://i.ytimg.com/vi/GqGRoxs8uI4/maxresdefault.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  color: white;
}

h1 {
  font-family: la-cithare;
  font-size: 60px;
  text-shadow: -2px 2px 2px #000000, 2px -2px 2px #000000;
  user-select: none;
}

.quote-div {
  background: rgba(0, 0, 0, .5);
  border-radius: 3px;
  margin: 10px 0px 10px 0px;
  font: 20px Segoe Print;
  min-height: 210px;
}

.quote-col {
  padding: 10px 0px 10px 0px;
  color: white;  
}

address {
 font-style: oblique;
}

.twitter-share-button {
  /* Official twitter logo color */
  color: #0084b4;
  background: linear-gradient(rgba(153, 153, 153, 0.1), rgba(153, 153, 153, 0.1));
  border: 1px solid white;
  border-radius: 100%;
  margin-bottom: 10px;
}

.twitter-share-button:hover {
  /* Official twitter logo color */
  color: #0084b4;
  background: transparent;
  border: 1px solid #0084b4;
  border-radius: 100%;
  margin-bottom: 10px;
}

#quote-button {
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
  color: white;
  font-family: la-cithare;
  font-size: 35px;
  width: auto;
  height: auto;
}

footer {
  margin: 10px 0px 10px 0px;
}

/* /Fade in animation */
.quote-col q {
  -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 1s; /* Firefox < 16 */
  -ms-animation: fadein 1s; /* Internet Explorer */
  -o-animation: fadein 1s; /* Opera < 12.1 */
  animation: fadein 1s; */
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ./Fade in animation */

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />