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

## readme.md

      
    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


really like to use Trianglify(https://qrohlf.com/trianglify/) everywhere!
I tweak a bit by trigger it when the window is being resized.

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.


## exercise-freecodecamp-build-a-random-quote-machine.markdown

      
    Raw
  

              exercise-freecodecamp-build-a-random-quote-machine.markdown
            
          
    exercise@freeCodeCamp: Build a Random Quote Machine

A Pen by 李孟諭 on CodePen.
License.

  
## 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>


## 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); //延遅一下，但視窗縮放好後再重製，效果會更直覺
});

## 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>

## 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;
}

## 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" />

	<!-- 文句卡片區 -->
	<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">×</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>
	$(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); //延遅一下，但視窗縮放好後再重製，效果會更直覺
	});
	<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>
	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;
	}
	<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" />