> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/free-code-camp-practice/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/intermediate-front-end-development-projects.md).

# Intermediate Front End Development Projects

## Build a Random Quote Machine Incomplete

什麼是 User Sotry

* [敏捷：什么是用户故事（User Story） - Comm100 Testers - 博客园](http://www.cnblogs.com/henryhappier/archive/2011/02/23/1962617.html)
* [User story - Wikipedia](https://en.wikipedia.org/wiki/User_story)

完成以下的需求

* User Story: I can click a button to show me a new random quote.
* User Story: I can press a button to tweet out a quote.

用 jQuery 修改 css

* [jQuery 基本語法（改變元素顏色）-- - 樂多閱讀](http://reader.roodo.com/jessica_bird/archives/10065447.html)

```javascript
$("#demo").click(function(){   //選取id為demo的元素，並且綁定onclick事件。
   $("#demo").css("background-color","red");  //將id為demo的元素，其背景顏色設為紅色。
});

//用串連的方式將id為container的元素，其文字顏色設為藍色，背景顏色設為紅色。
$("#container").css("color", "blue").css("background-color", "red");
```

SNS 分享的 api

* [qop's notes: 網頁分享到 FB 的連結](https://qops.blogspot.tw/2013/11/fb.html)
* [Tweet Button — Twitter Developers](https://dev.twitter.com/web/tweet-button)
* [Facebook分享链接 - 没有javascript - 共享笔记](https://gxnotes.com/article/37984.html)
* [Random Famous Quotes API Documentation](https://market.mashape.com/andruxnet/random-famous-quotes)

官方的範例

* [freeCodeCamp : Random Quote Machine](https://codepen.io/freeCodeCamp/pen/ONjoLe)

我的實做

* [Random Quote Machine](https://codepen.io/ayugioh2003/pen/PKpmrg)
* [全螢幕 CodePen - Random Quote Machine](https://s.codepen.io/ayugioh2003/debug/PKpmrg/yYAyLDbqgZpr)

See the Pen [Random Quote Machine](https://codepen.io/ayugioh2003/pen/PKpmrg/) by Chiu ([@ayugioh2003](https://codepen.io/ayugioh2003)) on [CodePen](https://codepen.io).

&#x20;\--- ## Show the Local Weather 完成以下需求 - User Story: I can see the weather in my current location. - User Story: I can see a different icon or background image(e.g. snowy mountain, hot desert) depending on the weather. - User Story: I can push a button to toggle between Fahrenheit and Celsius. 可能需要用到的概念 - geolocation, html5 內建 - FFC 提供的 api - google map 提供的 api 用 google map API 回傳地址 \* \[筆記-地址轉換經緯度 C#及Javascript版本 | 我的Coding之路 - 點部落]\(<https://dotblogs.com.tw/lastsecret/2011/11/30/60183>) \* \[透過 Google map Geocoder API 以經緯度轉換地址資訊 | Kuro's Blog]\(<https://kuro.tw/posts/2015/04/27/address-information-is-obtained-through-google-map-geocoder-with-the-latitude-and-longitude/>) \* \[答客問-使用google.maps.Geocoder()轉換地址 - 黑暗執行緒]\(<http://blog.darkthread.net/post-2012-06-21-js-google-maps-geocoder.aspx>) \* \[google map javascript API 使用教學 « chi - 下班隨筆]\(<http://chi15036-blog.logdown.com/posts/303408-google-map-javascript-api-use>) \* \[Google Maps API 從地址取得座標位置 | 紅色死神]\(<http://blog.wingzero.tw/2013/06/google-map-api-get-geolocation-from.html>) \`\`\`js

var geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: '台北市忠孝東路五段' }, function (result, status) { if (status == google.maps.GeocoderStatus.OK) {

```
    var location = result[0].geometry.location;
    // location.Pa 緯度
    // location.Qa 經度

} else {
    alert('解析失敗!回傳狀態為：' + status);
}
```

});

````
成果
<p data-height="265" data-theme-id="0" data-slug-hash="JyNKYO" data-default-tab="result" data-user="ayugioh2003" data-embed-version="2" data-pen-title="Show the Local Weather" class="codepen">See the Pen <a href="https://codepen.io/ayugioh2003/pen/JyNKYO/">Show the Local Weather</a> by Chiu (<a href="https://codepen.io/ayugioh2003">@ayugioh2003</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

---

## Build a Wikipedia Viewer

wikiapi，官方提供的資源
* [API:Main page - MediaWiki](https://www.mediawiki.org/wiki/API:Main_page)
* [API:首页 - MediaWiki](https://www.mediawiki.org/wiki/API:Main_page/zh)
* [API sandbox - Wikipedia](https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&prop=revisions&titles=Main+Page&rvprop=timestamp%7Cuser%7Ccomment&rvlimit=5)
* [MediaWiki API help - Wikipedia](https://en.wikipedia.org/w/api.php)

我目前覺得是用 poensearch 這個東西啦
* [API:Opensearch - MediaWiki](https://www.mediawiki.org/wiki/API:Opensearch)
* [MediaWiki API help - Wikipedia](https://en.wikipedia.org/w/api.php?action=help&modules=opensearch)

找到能用的 AJAX 語法

* [javascript - Using Wikipedia's API to fetch results from search query - Stack Overflow](https://stackoverflow.com/questions/36985111/using-wikipedias-api-to-fetch-results-from-search-query)
* [Getting Data From the Wikipedia API Using jQuery | 9bit Studios](http://www.9bitstudios.com/2014/03/getting-data-from-the-wikipedia-api-using-jquery/)
* [抓字典 Edit fiddle - JSFiddle](https://jsfiddle.net/jakecigar/ja3qg73t/)

什麼是 jsonp, ajax

* [[jQuery] AJAX 操作範例集 (json, jsonp) -網頁新知](http://blog.webgolds.com/view/372)
* [[程式][JQuery] JQuery中的Ajax的基礎運用。提供範例程式下載。 @ 四處流浪的阿基。I am Vagrant Walker :: 痞客邦 PIXNET ::](http://expect7.pixnet.net/blog/post/37919326-%5B%E7%A8%8B%E5%BC%8F%5D%5Bjquery%5D-jquery%E4%B8%AD%E7%9A%84ajax%E7%9A%84%E5%9F%BA%E7%A4%8E%E9%81%8B%E7%94%A8%E3%80%82%E6%8F%90%E4%BE%9B%E7%AF%84)
* [[jQuery] AJAX 學習筆記 (一) 如何使用 JSON 驗證使用者表單 | 小惡魔 - 電腦技術 - 工作筆記 - AppleBOY](https://blog.wu-boy.com/2008/09/jquery-ajax-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-%E4%B8%80-%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8-json-%E9%A9%97%E8%AD%89%E4%BD%BF%E7%94%A8%E8%80%85%E8%A1%A8%E5%96%AE/)
* [jQuery ajax - ajax() 方法](http://www.w3school.com.cn/jquery/ajax_ajax.asp)
* [Cross Domain Ajax 跨網域抓取資料(JSONP) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天](http://ithelp.ithome.com.tw/articles/10094915)
* [JSONP](https://www.w3schools.com/js/js_json_jsonp.asp)
* [使用 JSONP 跨站請求](https://openhome.cc/Gossip/JavaScript/JSONP.html)

jQuery 語法
* [jQuery 文档操作 - append() 方法](http://www.w3school.com.cn/jquery/manipulation_append.asp)

結果
* [Build a Wikipedia Viewer](https://codepen.io/ayugioh2003/pen/vJZBYX?editors=1011)

<p data-height="265" data-theme-id="0" data-slug-hash="vJZBYX" data-default-tab="result" data-user="ayugioh2003" data-embed-version="2" data-pen-title="Build a Wikipedia Viewer" class="codepen">See the Pen <a href="https://codepen.io/ayugioh2003/pen/vJZBYX/">Build a Wikipedia Viewer</a> by Chiu (<a href="https://codepen.io/ayugioh2003">@ayugioh2003</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

---

## Use the Twitchtv JSON API

需求

- User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv.
- User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.
- User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.

摸索出來抓 json 的方法

一、getJSON

* 了解 getjson 怎麼用 [freeCodeCamp Challenge Guide: How to Use the TwitchTV API - Guide - freeCodeCamp Forum](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-how-to-use-the-twitchtv-api/19541)
* 現在 api 要有客戶的 id 才能用 [Twitch Developers - Using the Twitch API](https://dev.twitch.tv/docs/v5/guides/using-the-twitch-api)

```js
$.getJSON('https://api.twitch.tv/kraken/streams/ESL_SC2?client_id=axjhfp777tflhy0yjb5sftsil', function(data) {
  console.log(data);
});
````

二、ajax

* [Client-ID required for Kraken API calls](https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843)

```javascript
$.ajax({
 type: 'GET',
 url: 'https://api.twitch.tv/kraken/channels/twitch',
 headers: {
   'Client-ID': 'axjhfp777tflhy0yjb5sftsil'
 },
 success: function(data) {
   console.log(data);
 }
});
```

三、FFC 提供的 api (不需要 id)

* [FCC Twitch API pass-through](https://wind-bow.glitch.me/)

```javascript
$.getJSON('https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=?', function(data) {
  console.log(data);
});
```