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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/intermediate-front-end-development-projects.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.