edsonv · July 9, 2016 23:28 · Jul 9, 2016
diff --git a/Random Quote Machine.markdown b/Random Quote Machine.markdown
@@ -0,0 +1,7 @@
+Random Quote Machine
+--------------------
+
+
+A [Pen](https://codepen.io/edsonv/pen/rLyPLG) by [Edson J Vargas](http://codepen.io/edsonv) on [CodePen](http://codepen.io/).
+
+[License](https://codepen.io/edsonv/pen/rLyPLG/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<div class="quote-box">
+  <div class="quote-text">
+    <i class="fa fa-quote-left"> </i>
+    <span id="text"></span>
+  </div>
+  <div class="quote-author">
+    - <span id="author"></span>
+  </div>
+  <div class="buttons">
+    <a class="button" id="tweet-quote" target="_blank" title="Tweet this quote!">
+      <i class="fa fa-twitter"> </i>
+    </a>
+    <button class="button" id="new-quote">New quote</button>
+  </div>
+</div>
diff --git a/script.js b/script.js
@@ -0,0 +1,75 @@
+/*
+  Code by Gabriel Nunes
+*/
+
+function inIframe() {
+    try {
+        return window.self !== window.top;
+    } catch (e) {
+        return true;
+    }
+}
+
+var colors = ['#16a085', '#27ae60', '#2c3e50', '#f39c12', '#e74c3c', '#9b59b6', '#FB6964', '#342224', "#472E32", "#BDBB99", "#77B1A9", "#73A857"];
+var currentQuote = '',
+    currentAuthor = '';
+
+function openURL(url) {
+    window.open(url, 'Share', 'width=550, height=400, toolbar=0, scrollbars=1 ,location=0 ,statusbar=0,menubar=0, resizable=0');
+}
+
+function getQuote() {
+    $.ajax({
+        headers: {
+            "X-Mashape-Key": "ZO9joOdalemshb1GrWR0T9MA3KlYp1nyvsTjsnW7srEXsgFEf1",
+            Accept: "application/json",
+            "Content-Type": "application/x-www-form-urlencoded"
+        },
+        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/cat=',
+        success: function(response) {
+            var r = JSON.parse(response);
+            currentQuote = r.quote;
+            currentAuthor = r.author;
+            if (inIframe()) {
+                $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
+            }
+            $(".quote-text").animate({
+                    opacity: 0
+                }, 500,
+                function() {
+                    $(this).animate({
+                        opacity: 1
+                    }, 500);
+                    $('#text').text(r.quote);
+                });
+
+            $(".quote-author").animate({
+                    opacity: 0
+                }, 500,
+                function() {
+                    $(this).animate({
+                        opacity: 1
+                    }, 500);
+                    $('#author').text(r.author);
+                });
+
+            var color = Math.floor(Math.random() * colors.length);
+            $("html body").animate({
+                backgroundColor: colors[color],
+                color: colors[color]
+            }, 1000);
+            $(".button").animate({
+                backgroundColor: colors[color]
+            }, 1000);
+        }
+    });
+}
+$(document).ready(function() {
+    getQuote();
+    $('#new-quote').on('click', getQuote);
+    $('#tweet-quote').on('click', function() {
+        if (!inIframe()) {
+            openURL('https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=' + encodeURIComponent('"' + currentQuote + '" ' + currentAuthor));
+        }
+    });
+});
diff --git a/scripts b/scripts
@@ -0,0 +1,3 @@
+<script src="https://use.fontawesome.com/0e6a28011d.js"></script>
+<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
diff --git a/style.css b/style.css
@@ -0,0 +1,90 @@
+@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300,400);
+* {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  vertical-align: baseline;
+}
+
+div {
+  position: relative;
+  z-index: 2;
+}
+
+body {
+  background-color: #333;
+  color: #333;
+  font-family: "Titillium Web", sans-serif;
+  font-weight: 300;
+}
+
+.quote-box {
+  border-radius: 3px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 450px;
+  padding: 40px 50px;
+  background-color: #fff;
+}
+
+.quote-box .quote-text {
+  text-align: center;
+  width: 450px;
+  height: auto;
+  clear: both;
+  font-weight: 400;
+  font-size: 1.75em;
+}
+
+.quote-box .quote-text i {
+  font-size: 1.0em;
+  margin-right: 0.4em;
+}
+
+.quote-box .quote-author {
+  width: 450px;
+  height: auto;
+  clear: both;
+  padding-top: 20px;
+  font-size: 1em;
+  text-align: right;
+}
+
+.quote-box .buttons {
+  width: 450px;
+  margin: auto;
+  display: block;
+}
+
+.quote-box .buttons .button {
+  height: 38px;
+  border: none;
+  border-radius: 3px;
+  color: #fff;
+  background-color: #333;
+  outline: none;
+  font-size: 0.85em;
+  padding: 8px 18px;
+  margin-top: 30px;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.quote-box .buttons .button:hover {
+  opacity: 0.9;
+}
+
+.quote-box .buttons .button#tweet-quote {
+  float: left;
+  padding: 4px;
+  text-align: center;
+  font-size: 1.2em;
+  height: 30px;
+  width: 30px;
+}
+
+.quote-box .buttons .button#new-quote {
+  float: right;
+}
No results found