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

官方的範例

我的實做

See the Pen Random Quote Machine by Chiu (@ayugioh2003) on CodePen.

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

});

二、ajax

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

PreviousJSON APIs and AjaxNextIntermediate Algorithm Scripting

Last updated

Was this helpful?