init

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015"]
+}

.gitignore

@@ -0,0 +1 @@
+node_modules/

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - "node"
+cache: yarn
+before_script: 
+  - wget $TESTCASE_URL
+notifications:
+  email: false

codewar.md

@@ -0,0 +1,123 @@
+# Codewar 練習題
+
+Codewar 是一個程式解題平台，上面充滿著各種開發者出的題目，會使用這個平台的理由為：
+
+1. 可以自己寫測試驗證基本測資
+2. 過關後可以看到其他人的解答
+3. 方便導師追蹤解題成效
+
+## 注意事項
+
+解題最重要的一點就是：絕對不要輕易看答案。為什麼解題能夠成長？是因為你有思考，思考過後想出來的答案才是你的，如果你放棄了然後去看別人的答案，那就始終是別人的，不會是你自己的。
+
+想了一陣子還是想不出來的話，不用急，去洗個澡或是散個步搞不好就想通了（真心不騙）
+
+若是認真想過還是想不出來，這時候可以先尋求一些提示，如果還是沒頭緒，這時候才能去查解答。但看完解答之後務必理解，並且重新再測驗一遍。
+
+做完之後請自行把標題的 ❌ 換成 ✅。
+
+## 題目列表
+
+以下按照題目難度分類
+
+## 零顆星（超簡單）
+
+### ❌ Opposite number
+題目連結：https://www.codewars.com/kata/opposite-number/javascript  
+題目說明：正數變負數，反之亦然
+
+### ❌ Even or Odd
+題目連結：https://www.codewars.com/kata/even-or-odd/javascript  
+題目說明：判斷是奇數或是偶數
+
+## 一顆星（熟悉語法）
+
+### ❌ Number-Star ladder
+題目連結：https://www.codewars.com/kata/number-star-ladder/javascript  
+題目說明：
+這題就是依照規律輸出文字，沒什麼好講的
+
+### ❌ Who likes it
+題目連結：https://www.codewars.com/kata/who-likes-it  
+題目說明：模擬 Facebook 按讚時或出現的文字
+
+### ❌ String repeat
+題目連結：https://www.codewars.com/kata/string-repeat/javascript  
+題目說明：回傳重複 n 遍的字串
+
+### ❌ Build Tower
+題目連結：https://www.codewars.com/kata/build-tower  
+題目說明：
+也是依照規律輸出文字即可
+
+### ❌ Reversed Strings
+題目連結：https://www.codewars.com/kata/reversed-strings/javascript  
+題目說明：
+把輸入的文字反轉過後回傳，如果想挑戰自己的話，可以試試看用陣列的各種內建函式組合完成
+
+### ❌ Reversed Words
+題目連結：https://www.codewars.com/kata/reversed-words  
+題目說明：
+這一題是進階版的字串反轉，原本的只要把每個「字元」反轉，這個則是要把每個「單字」反轉。
+
+### ❌ Alternate case
+題目連結：https://www.codewars.com/kata/alternate-case  
+題目說明：把大寫字母轉成小寫，小寫字母轉成大寫
+
+### ❌ You only need one - Beginner
+題目連結：https://www.codewars.com/kata/you-only-need-one-beginner/javascript  
+題目說明：回傳要找的元素是否在陣列裡面
+
+### ❌ Find the capitals
+題目連結：https://www.codewars.com/kata/find-the-capitals-1/javascript  
+題目說明：回傳大寫字母所在的 index
+
+### ❌ Sum arrays
+題目連結：https://www.codewars.com/kata/sum-arrays/javascript  
+題目說明：把陣列加總回傳結果
+
+### ❌ Find the smallest integer in the array
+題目連結：https://www.codewars.com/kata/find-the-smallest-integer-in-the-array   
+題目說明：找出陣列中最小的數字
+
+## 兩顆星（需要花點時間思考）
+
+### ❌ Shortest Word
+題目連結：https://www.codewars.com/kata/shortest-word/javascript  
+題目說明：回傳最短的單字的長度
+
+### ❌ Bit Counting
+題目連結：https://www.codewars.com/kata/bit-counting/javascript  
+題目說明：計算 bit 的總數
+
+### ❌ Find The Parity Outlier
+題目連結：https://www.codewars.com/kata/find-the-parity-outlier/javascript   
+題目說明：全部的數字裡，只有一個的奇偶跟其他的不一樣，你要找出這個數字
+
+### ❌ Take a Ten Minute Walk
+題目連結：https://www.codewars.com/kata/take-a-ten-minute-walk/javascript  
+題目說明：有一個人他可以往東南西北這四個方向走，請幫他計算它能否剛好在十步的時候回到原點
+
+### ❌ Tribonacci Sequence
+題目連結：https://www.codewars.com/kata/tribonacci-sequence/javascript  
+題目說明：費式數列的進階版
+
+### ❌ A Man and his Umbrellas
+題目連結：https://www.codewars.com/kata/a-man-and-his-umbrellas/javascript  
+題目說明：  
+這題需要花多一點時間去思考。
+
+input 會給你每天的氣象預報，基本上就是下雨跟沒下雨。如果早上下雨，那就會從家裡帶一把傘去公司，如果家裡沒傘的話需要買一把。如果晚上下雨，必須要從公司帶一把傘回家。如果公司沒傘，必須去買一支傘。
+
+你要輸出的結果就是：總共需要買幾支傘才行。
+
+舉例來說：`["rainy", "clear", "rainy", "cloudy"]`，就是第一天早上下雨，所以要買第一把傘到公司，回家的時候沒下雨，所以把傘放在公司。而第二天早上又下雨，家裡沒傘，需要買第二把傘，因此答案是 2。
+
+`["rainy", "rainy", "rainy", "rainy", "thunderstorms", "rainy"]`的話，每一天的早上跟晚上都在下雨，所以只要買一把傘就可以從家裡到公司，再從公司帶回家裡。
+
+### ❌ Check if two words are isomorphic to each other
+題目連結：https://www.codewars.com/kata/check-if-two-words-are-isomorphic-to-each-other  
+題目說明：  
+這題比較複雜一點，如果兩個字串 A 跟 B 存在「一對一關係」，那我們就可以說這兩個字串是同構（isomorphic）的。  
+
+舉例來說，ABB 跟 CDD，A 對應到 C，B 對應到 D，存在一對一的關係，所以是同構的。

homeworks/week1/README.md

@@ -0,0 +1,88 @@
+# 作業
+
+## hw1：印出星星
+給定 n（1<=n<=30），依照規律印出正確圖形
+
+```
+n = 1
+*
+
+n = 3
+*
+*
+*
+
+n = 6
+*
+*
+*
+*
+*
+*
+```
+
+## hw2：首字母大寫
+給定一字串，把第一個字轉成大寫之後回傳，若第一個字不是英文字母則忽略。
+
+```
+input: nick
+output: Nick
+
+input: Nick
+output: Nick
+
+input: ,hello
+output: ,hello
+```
+
+## hw3：反轉字串
+給定一個字串，請輸出反轉之後的樣子（不能使用內建的 `reverse` 函式）
+
+```
+input: yoyoyo
+output: oyoyoy
+
+input: 1abc2
+output: 2bca1
+
+input 1,2,3,2,1
+output: 1,2,3,2,1
+```
+
+## hw4：印出因數
+先幫大家複習一下數學，給定一個數字 n，因數就是所有小於等於 n 又可以被 n 整除的數，所以最明顯的例子就是 1 跟 n，這兩個數一定是 n 的因數。現在請寫出一個函式來印出所有的因數
+
+```
+input: 10
+output:
+1
+2
+5
+10
+
+input: 7
+output:
+1
+7
+```
+
+## hw5：自己的函式自己寫
+其實仔細思考的話，你會發現那些陣列內建的函式你其實都寫得出來，因此這一題就是要讓你自己動手實作那些函式！
+
+我們要實作的函式有兩個：join 以及 repeat。
+
+```
+join([1, 2, 3], '') => 123
+join(["a", "b", "c"], "!") => a!b!c!
+join(["a", 1, "b", 2, "c", 3], ',') => a,1,b,2,c,3
+
+repeat('a', 5) => aaaaa
+repeat('yoyo', 2) => yoyoyoyo
+```
+
+## hw6：簡答題
+請將答案寫在[hw6.md](hw6.md)。
+
+1. 請解釋後端與前端的差異。
+2. 假設我今天去 Google 首頁搜尋框打上：JavaScript 並且按下 Enter，請說出從這一刻開始到我看到搜尋結果為止發生在背後的事情。
+3. 請列舉出 5 個 command line 指令並且說明功用。

homeworks/week1/hw1.js

@@ -0,0 +1,3 @@
+function printStars(n) {
+
+}

homeworks/week1/hw2.js

@@ -0,0 +1,3 @@
+function capitalize(str) {
+
+}

homeworks/week1/hw3.js

@@ -0,0 +1,3 @@
+function reverse(str) {
+
+}

homeworks/week1/hw4.js

@@ -0,0 +1,3 @@
+function printFactor(n) {
+
+}

homeworks/week1/hw5.js

@@ -0,0 +1,7 @@
+function join(str, concatStr) {
+
+}
+
+function repeat(str, times) {
+
+}

homeworks/week1/hw6.md

@@ -0,0 +1,8 @@
+## 請解釋後端與前端的差異。
+
+
+## 假設我今天去 Google 首頁搜尋框打上：JavaScri[t 並且按下 Enter，請說出從這一刻開始到我看到搜尋結果為止發生在背後的事情。
+
+
+
+## 請列舉出 5 個 command line 指令並且說明功用

homeworks/week10/README.md

@@ -0,0 +1,57 @@
+# 作業
+
+## hw1：Gulp
+
+gulp 就是用來把原本的工作流程自動化的，現在請你寫一個 gulp 的設定檔，依序完成以下事情：
+
+1. 把 scss 編譯成 css
+2. 把 js 用 babel 轉成 ES5 語法
+3. 把 css 以及 js 壓縮
+
+## hw2：Webpack
+
+Webpack 的目的其實就是讓前端也能夠像 Node.js 那樣，支援 `module.exports` 以及 `require`。
+
+為了讓你體驗 Webpack，在這個作業中你只要做以下簡單的幾件事情就好：
+
+1. 寫一個檔案叫做 `utils.js`，裡面有一個叫做 `add` 的 function
+2. 寫一個檔案叫做 `index.js`
+3. 在 `index.js` 裡面引入 `add` 這個 function 並且輸出`add(10, 3)`
+4. 用 Webpack 把以上檔案打包產生出 `bundle.js`
+
+## hw3：Todo List
+
+之前在第七週時已經讓大家寫過一個 todo list，這次我們要來點不一樣的。
+
+其實有一種寫法非常直覺，而且寫起來非常方便，那就是「只要資料更新，我就全部重新 render」。
+
+什麼意思呢？之前我們寫第七週的作業時，新增的話就是新增一筆資料，然後在 DOM 上面 append，刪除的話就是直接把 DOM 上面的那筆元素刪掉。
+
+可是其實還有另外一種做法，用程式碼示意的話會長這樣：
+
+``` js
+var list = []
+function addTodo(todo) {
+  list.push(todo)
+  render()
+}
+
+function removeTodo(id) {
+  list = list.filter(item => item.id !== id)
+  render()
+}
+
+function render(){
+  $('.todo-list').empty()
+  $('.todo-list').append(list.map(item => `<li>${todo.content}</li>`)) // 示意
+}
+```
+
+每次只要資料有更新，你就更新資料就好，然後把畫面全部重新渲染。如此一來的好處就是你完全不用管 DOM，你只要更新程式裡面的資料即可。
+
+現在請你把之前實作的 Todo list 改成這種形式，更新資料並且 re-render。
+
+## hw4：簡答題
+
+1. gulp 跟 webpack 有什麼不一樣？我們可以不用它們嗎？
+2. hw3 把 todo list 這樣改寫，可能會有什麼問題？

homeworks/week10/hw4.md

@@ -0,0 +1,5 @@
+## gulp 跟 webpack 有什麼不一樣？我們可以不用它們嗎？
+
+
+## hw3 把 todo list 這樣改寫，可能會有什麼問題？
+

homeworks/week11/README.md

@@ -0,0 +1,18 @@
+# 作業
+
+## hw1：留言板
+
+這週上到了 Express 這一個 Node.js 的框架，而這次的作業很簡單，就是要把之前寫的留言板系統移植到 Express 上面，讓你體驗看看有用框架跟沒有用框架的差別在哪。
+
+這次的移植照理來說只會有後端程式碼有變化，前端應該會是完全不變的。
+
+## hw2：短網址系統
+
+之前有帶大家設計過短網址的系統架構，那時候是要求大家考量的越大越複雜越好，但這次作業我們只要實作一個簡單的版本就好，能夠讓使用者輸入長網址並且產生短網址，以及讓短網址可以導到正確的網頁去。
+
+至於要怎麼生成短網址的那個網址，就交給大家自己去研究了！
+
+## hw3：簡答題
+
+1. 什麼是 MVC？
+2. 什麼是 ORM？

homeworks/week11/hw3.md

@@ -0,0 +1,5 @@
+## 什麼是 MVC？
+
+
+## 什麼是 ORM？
+

homeworks/week12/README.md

@@ -0,0 +1,30 @@
+# 作業
+
+## hw1：Todo List
+
+請你用 React 實作出一個 todo list，介面跟功能就參考之前用 jQuery 寫出來的那個就行了。
+
+## hw2：五子棋遊戲
+
+請實作出一個簡單的五子棋遊戲，讓黑棋白棋可以輪流下，並且判定勝負。棋盤的話請用十九路棋盤（19*19），如果想挑戰更進階的，可以試著把棋譜也記錄起來，甚至是做一個輸入棋譜就可以重演整個盤面的小程式。
+
+## hw3：Blog SPA
+
+請做出一個簡單的 Blog 前端頁面，就像我在影片裡面示範的那樣，一共有三個頁面：
+
+1. About
+2. 文章列表
+3. 單篇文章
+
+API 的話可以用這個：https://jsonplaceholder.typicode.com/posts
+
+圖片可參考：
+
+![](blog.png)
+
+## hw4：簡答題
+
+1. 為什麼我們需要 React？可以不用嗎？
+2. React 的思考模式跟以前的思考模式有什麼不一樣？
+2. state 跟 props 的差別在哪裡？
+3. 請列出 React 的 lifecycle 以及其代表的意義