Show the Local Weather - ruilee16/myFreeCodeCamp GitHub Wiki
###Show the Local Weather|天气预报器
Build a web page with a function of showing the local weatehr. Here are some examples:FCC:Random Quote Machine
- I can see the weather in my current location.
- I can see a different icon or background image.
- I can push a button to toggle between Fahrenheit and Celsius.
| html | javascript | css |
|---|---|---|
<h1>title</h1> |
using api to get weather datas | 1.position |
<div class="quoteContainer"></div> |
var quotes=[{},{}...] |
2.backgroun-color changing and animation |
<button class="but" onclick="getQuote()"></button> |
3. | |
| ps: | ||
| 1.using local weather API to get the weather data。 |
- To fetch JSON from website(url), one could use jQuery
$.getJSON(url,function(json){});
- Inorder to get the Geolocation from desktop, I should set the localhost. Here is the detailed tutorial.
-
getCurrentPosition()andwatchPosition()no longer work on insecure origins in chrome. To solve this problem, one could add "https://" in front of the url. Another way to do this is using a position APIhttp://ip-api.com/json to get the location. - add the weather awesome icon in the page, using references from https://erikflowers.github.io/weather-icons/ or https://erikflowers.github.io/weather-icons/
-
$(document).ready()。 - 用jQuery写的函数可以放在html文件外部么？
- 如何使用API?
- JSON 数据的读取与处理。
- 学会选择字体及配色。Font and color
- 怎么把twitter功能加到我的文档里？
- 如何使用css给网页添加动画效果？用html 或者 javascript呢？
#####references|参考
- Ziplin Build a random quote machine.Ziplin的名言生成器
- add icon to
<html>document w3school.添加社交媒体的标签 - tweet out: using onclick()+window.open()/using +$(this).attr('href','...')