Intermediate Front End Development Projects

一 Build a Random Quote Machine

功能#1: 点击一个按钮就生存一个新的随机引用短语。
功能#2: 点击一个按钮就把这个引用短语发到twitter中。

1 CSS部分

bug1:

bug 2:

bug3:

.quote{
  border-radius:3px;
  position:relative;
  dispaly:table;/*???*/
  width:470px;/*+20*/
  margin:8% auto auto auto;
  padding:40px 10px;/*quote div下面变高了*/
  background-color:white;
}

主要是修改<div class=“quote”>的padding和width的值。

2 $.ajax方法

参考：

1. https://blog.csdn.net/Captain249/article/details/78610707
   $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。

2. http://www.runoob.com/jquery/ajax-ajax.html
   ajax() 方法用于执行 AJAX（异步 HTTP）请求。
   所有的 jQuery AJAX 方法都使用 ajax() 方法。

3 .text()跟.html()区别

https://blog.csdn.net/qq_27918787/article/details/52767981

1. .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
2. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

4 如何存储JSON数据并读取JSON数据

使用API

---

5 conclusion

这个project完成不是很好，断断续续用了一周学习了14.5h，实际上也没作出太多自己的东西。一直配置不了自己的API，由于生病，学习效率太低。

二 Show the Local Weather

实现路径: 页面结构->样式->功能->接口->展示 。

第一步: 用你熟悉的HTML快速构建出页面的结构。

第二步: 用CSS给页面添加样式，让页面变得漂亮起来。

第三步: 用JavaScript给页面添加功能，让页面能动起来。

第四步: 通过Ajax获取到JSON数据，来动态更新页面。

第五步: 把本地编辑器的代码放在CodePen或RunJS上，让大家都可以来观赏。

API：我们推荐使用聚合数据天气预报接口，它需要你创建一个免费的APPKey，通过Ajax获取天气数据。