Skip to content

Instantly share code, notes, and snippets.

@meyu

meyu/exercise-freecodecamp-build-a-random-quote-machine.markdown

Last active May 18, 2017 03:40
Show Gist options
  • Save meyu/35323826b29bba5400a544c6dda7967e to your computer and use it in GitHub Desktop.
Save meyu/35323826b29bba5400a544c6dda7967e to your computer and use it in GitHub Desktop.
Download ZIP
exercise@freeCodeCamp: Build a Random Quote Machine
Raw
readme.md

purpose

For the challenge of freeCodeCamp's "Build a Random Quote Machine", and for fun of playing with something cool.

build by

jQuery.ajax() with a Quotes API

  • got the API from Random Famous Quotes, which was served on Mashape marketplace, and needs to register before using it.
  • was tended to use jQuery.getJSON method, but somehow couldn't cross the "MIME" and "CORS" errors when working at CodePen.
  • was tended to find a Chinese poem API but didn't get one.

Tweet

  • choose a pure link solution to make the tweet button, by using Javascript to rebuild the button after a new quote was present.
  • followed Twitter Publish to load it's widgets.js and make the "official" tweet button, but found it no good when meet the AdBlock users. Also, custom a tweet button is not allowed, so I away from this road.
  • was open a new specific window after the click of this button by using "window.open" method, but found it does not perform the same way across browsers, so I away from this road and simply just use the "_blank".
  • was tended to make Facebook Feed Dialog, but couldn't find a way to put the quote into it's content, so here's no Facebook. Instead, I made a "mail" button to be a company.

Bootstrap v4.0.0-alpha.6

  • tried to gain the advantage of it's RWD and easy-to-layout framework.
  • was familiar of v3.3.7, but being attracted for the new Outline Buttons, Flexbox, Fixed Position
  • made the .card in the center of the screen by using .d-flex property, but still, need to set <html>'s and <body>'s height to 100% in CSS manually.

Font Awesome v4.7.0

  • love it's icons and spinning feature!
  • cause of a faster spinning requirement, I override .fa-spin-faster in the CSS.

Google Fonts

  • just for a whim, pick up a web font "Love Ya Like A Sister" for decorating, and the result which is surprisingly good.
  • As a man who speaking Chinese, I stubbornly import another web font "明體", which is useless and superfluous.

Trianglify

GitHub Gist

  • export this CodePen to my GitHub Gist for another way of code demonstration.
  • wrote a readme.md inside the Gist (it's a trick to stick the infomation on the top when browsing this gist), and play with Markdown-Writing a little.
  • frame the Gist inside the modal, another way of memorizing this challenge.
Raw
exercise-freecodecamp-build-a-random-quote-machine.markdown
Raw
index.html
<!-- 文句卡片區 -->
<div class="h-100 d-flex justify-content-center">
<div class="card text-center align-self-center">
<!-- 分享區 -->
<div class="col" style="top:-35px;">
<div id="shareButtons" class="btn-group"></div>
</div>
<!-- 內容區 -->
<div class="card-block">
<h2 id="content" class="text-left"></h2><!-- 文句 -->
<footer id="writer" class="text-muted"><!-- 作者／來源 -->
<cite id="book"></cite></footer><!-- 作品名 -->
</div>
<!-- 換句鈕 -->
<div class="col" style="top:13px;">
<button type="button" id="getNewContent" class="btn btn-sm btn-outline-secondary" onclick="doContentLoad()">
<i id="fa-spin" class="fa fa-repeat"></i>
</button>
</div>
</div><!-- card -->
</div><!-- d-flex --><!-- container -->
<!-- 置底區 -->
<div class="fixed-bottom">
<div class="float-right">
<button type="button" class="btn btn-sm btn-outline-secondary fa fa-github-alt" data-toggle="modal" data-target="#readme">
</button>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="readme" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<a href="https://www.freecodecamp.com/meyu" target="_blank">
meyu@<i class="fa fa-free-code-camp" aria-hidden="true"></i>
</a>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<script src="https://gist.github.com/meyu/35323826b29bba5400a544c6dda7967e.js"></script>
</div>
</div>
</div>
</div>
<!-- fullsreen loader -->
<div id="loader" class="loader loader-default"></div>
Raw
script.js
$(document).ready(function() {
doContentLoad();
triBG();
});
//資料呈現流程
function doContentLoad() {
$(".share-button").remove();
fadeWords(false);
showLoadingButton(true);
getContent();
// showLoader(true); //觸發全螢幕loader效果，但不耐常看，暫且封印
// 暫且等候 getContent 完成資料撈取，並讓按鈕轉個一圈
setTimeout(function() {
showLoadingButton(false); // showLoader(false);
fadeWords(true);
}, 1000);
setTimeout(function() {
setEmailButton();
setTweetButton();
setFacebookButton();
}, 1500);
}
//設定內容，API 來源採用了 Random Famous Quotes 方案 (https://market.mashape.com/andruxnet/random-famous-quotes)
var content = document.getElementById("content");
var writer = document.getElementById("writer");
var book = document.getElementById("book");
var fullcontent = "";
var quoteURL =
"https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies&count=1";
var XMashapeKey = "YME1sY3qkbmshdfRzX3N7qzBxYpJp1oV1JzjsnLyLrJRw0YtSx";
function getContent() {
//由於 jQuery.getJSON() 在 CodePen 上取用第三方 API 時，遇有 MIME 及 CORS 錯誤，我暫時不會解決，故採用 jQuery.ajax 土法煉鋼
$.ajax({
headers: {
'X-Mashape-Key': 'YME1sY3qkbmshdfRzX3N7qzBxYpJp1oV1JzjsnLyLrJRw0YtSx',
Accept: "application/json",
"Content-Type": "application/x-www-form-urlencoded"
},
url: quoteURL
})
.done(function(response) {
writer.innerHTML = response.author;
content.innerHTML = response.quote;
fullcontent = response.quote + " --" + response.author
})
.fail(function() {
content.innerHTML = "cannot hear the quotes...";
});
}
// 放置 Tweet 按鈕
function setTweetButton() {
// 客製化 Twitter Publish 方案，使 data-text 能填入當下的文句 (https://publish.twitter.com/)
// $.getScript("https://platform.twitter.com/widgets.js");
// $(".twitter-share-button").remove();
// var tweet = $("<a>").attr("class", "twitter-share-button");
// tweet.attr("data-text", fullcontent);
// $("#shareButtons").append(tweet);
// twttr.widgets.load(document.getElementById("shareButtons")); //重新呼叫twitter的wedget.js來重製一次tweet按鈕，並預限在shareButtons內搜尋，以加速其搜尋
// 純 html 方案，可客製化按鈕樣式，並減少 js 套件載入量 (https://developers.facebook.com/docs/sharing/reference/feed-dialog)
var tweetURL = encodeURI("http://twitter.com/share?text=" + fullcontent);
var tweet = $("<a>").attr("class","share-button btn btn-sm btn-outline-secondary fa fa-twitter");
tweet.attr("href", tweetURL);
tweet.attr("target", "_blank");
$("#shareButtons").append(tweet);
}
// 放置 email 分享按鈕
function setEmailButton() {
var emailURL = encodeURI("mailto:?subject=" + fullcontent + "&body=" + window.location.href);
var sendEmail = $("<a>").attr("class","share-button btn btn-sm btn-outline-secondary fa fa-envelope");
sendEmail.attr("href", emailURL);
sendEmail.attr("target","_blank");
$("#shareButtons").append(sendEmail);
}
//讓文句淡入淡出，比較不刺眼
function fadeWords(fadeIn) {
var speed = "slow";
var opacity = 0;
if (fadeIn) {
$("#content").fadeTo(speed, 1);
$("#writer").fadeTo(speed, 1);
$("#book").fadeTo(speed, 1);
} else {
$("#content").fadeTo(speed, opacity);
$("#writer").fadeTo(speed, opacity);
$("#book").fadeTo(speed, opacity);
}
}
//設定背景主題，採用 Trianglify 方案 (https://qrohlf.com/trianglify/)
function triBG() {
var pattern = Trianglify({
width: window.innerWidth,
height: window.innerHeight
});
document.body.style.backgroundImage = "url(" + pattern.png() + ")";
}
//全螢幕Loader特效展示，採用 CSS Loader 的方案 (http://www.raphaelfabeni.com.br/css-loader/)
var loader = document.getElementById("loader");
function showLoader(show) {
if (show) {
loader.classList.add("is-active");
} else {
loader.classList.remove("is-active");
}
}
//按鈕Loading特效，旋轉方法採用 font awasome 的 fa-spin 來完成
var btn = document.getElementById("getNewContent");
var spin = document.getElementById("fa-spin");
function showLoadingButton(show) {
if (show) {
btn.disabled = true;
spin.classList.add("fa-spin-faster");
} else {
btn.disabled = false;
spin.classList.remove("fa-spin-faster");
}
}
//視窗縮放時，要做一下畫面調整
//由於Trianglify是依據畫面大小產出對應的圖片，故視窗縮放時，要重製一下，畫面才會平衡
var t;
$(window).resize(function() {
clearTimeout(t); //使圖片重製動作時，不會有累積觸發多次而致閃爍的情況
t = setTimeout(function() {
triBG();
}, 800); //延遅一下，但視窗縮放好後再重製，效果會更直覺
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
Raw
style.css
body {
font-family: 'Love Ya Like A Sister', cursive, 'cwTeXMing', serif;
}
/* 為了讓物件能於畫面居中舖路 */
html, body {
height: 100%;
}
/* 讓字卡微透明 */
.card, .card-block{
opacity: 0.8;
}
/* 讓分享鈕等寬 */
.share-button {
width: 50px;
}
/* 覆寫 font awsome 的 fa-spin 的轉速，讓它能轉快一些 */
.fa-spin-faster {
-webkit-animation: fa-spin 1s infinite linear;
animation: fa-spin 1s infinite linear;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/cwtexming.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/css-loader/2.2.0/css-loader.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment