Intermediate Front End Development Projects

PreviousJSON APIs and Ajax NextIntermediate Algorithm Scripting

Last updated 5 years ago

Was this helpful?

Intermediate Front End Development Projects

Build a Random Quote Machine Incomplete

什麼是 User Sotry

完成以下的需求

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

$("#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

官方的範例

我的實做

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

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

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

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

PreviousJSON APIs and Ajax NextIntermediate Algorithm Scripting

Last updated 5 years ago

Was this helpful?

Build a Random Quote Machine Incomplete

什麼是 User Sotry

完成以下的需求

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

$("#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

官方的範例

我的實做

See the Pen by Chiu () on .

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

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

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

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