# Lidemy 第五期期中測驗

## 測驗說明

測驗時間為 120 分鐘，總共有四題，在寫題目的時候請注意時間，一題 30 分鐘，超過 30 分鐘請自行跳到下一題，就算沒有解完也一樣。如果還沒到 30 分鐘就完成，可以直接跳下一題。

測驗網址：https://stackblitz.com/edit/web-platform-erygfk?file=index.html

點進去之後請先在右上角以 GitHub 帳號登入，並且按下左上方的 Fork，把這個題目 fork 一份到自己帳號底下，才不會不小心遺失。

左邊檔案列的四個資料夾代表了四道題目，直接修改裡面的檔案即可。右邊的瀏覽視窗可以即時看到結果，底下有 console 點下去可以看到 console 內容。

考試結束之後，請透過這個表單把你的程式碼（直接複製 stackblitz 網址，開無痕確認連的到即可）交上來：https://forms.gle/Z3vnKBCfe4zZXGoRA

## 測驗規則

1. **禁止參考自己以前寫過的作業或是筆記**，因為想看大家 google 查資料的能力，因此禁止大家看自己的筆記
2. 可以打開 Google 查資料
3. 不能問人
4. 一題就是 30 分鐘，超過就不能再寫了
5. **不能使用任何第三方 library**

## 第一題：文章列表切版

請切出下面的版面（只考慮桌面版就好，不需考慮 RWD）：


請把時間放在「完成整體排版」，而非每個地方的小細節。舉例來說，文字顏色找個差不多的就好了，顏色不是重點，字體大小也只要差不多就好，不需要弄到一模一樣。margin 跟 padding 的部分也先憑感覺大概抓一下即可。

其他需注意事項為：

1. 背景那個灰色色碼為 #F2F2F2
2. 藍色色碼為 #00a0e9
3. 整體寬度為 800px
4. 右上角按鈕背景色為 #D5DFE3 ，文字顏色為 #62808F

## 第二題：食物清單管理器

這一題要實作的是一個想吃的食物的管理工具，介面已經幫你切好了，長這樣：


需求為：

1. 一開始食物列表必須是空的
2. 輸入文字點擊新增後，會在底下新增一個食物，並且在食物名稱旁邊有「刪除」按鈕
3. 按下刪除按鈕，便會把那個食物從列表中刪除
4. 按下「全部刪除」，會把列表清空
5. 按下「好手氣」，會隨機從五種食物中新增一種到清單上（食物列表已提供在 p2.js 裡面）

如果上面的需求在時間內完成，可以繼續做底下加分題，如果 30 分鐘已經用完就可以跳過：

1. 如果文字框是空的，或者都是空白的話，按下新增時會跳出 alert 顯示：「必須輸入食物名稱」
2. 清單必須被保留，重新整理過後依然能看到剛剛的清單

## 第三題：通訊錄

請實作一個簡單的通訊錄：


資料來源為這一個 API：https://jsonplaceholder.typicode.com/users

請串接這個 API，並且在畫面上顯示出每一個人的姓名、任職的公司名稱還有 email，以 ` / ` 隔開，並在最後面加上一個刪除按鈕。

按下刪除按鈕時，只要在畫面上把那一筆資料刪除即可

## 第四題：資料整理

你需要寫一個函式去整理資料，資料會是一個陣列，格式如下：

[
  {id: 1, value: 43},
  {id: 1, value: 213},
  {id: 2, value: 321},
  {id: 3, value: 2},
  {id: 3, value: 345},
  {id: 4, value: 555},
  {id: 4, value: 44},
  {id: 3, value: 33},
  {id: 3, value: 199},
]

對於 id 重複的資料，你必須把 value 合併在一起變成一個陣列，然後合併完的資料會放在「那個 id 第一次出現的位置」。合併時請注意順序，value 的順序要跟資料出現的順序一致。

舉例來說，上面資料把 id 是 1 的資料整理完之後會變成：

[
  {id: 1, value: [43, 213]},
  {id: 2, value: 321},
  {id: 3, value: 2},
  {id: 3, value: 345},
  {id: 4, value: 555},
  {id: 4, value: 44},
  {id: 3, value: 33},
  {id: 3, value: 199},
]

若是 id 沒有重複的，就不需要更動。

上面的資料最後整理完會變成這樣：

[
  {id: 1, value: [43, 213]},
  {id: 2, value: 321},
  {id: 3, value: [2, 345, 33, 199]},
  {id: 4, value: [555, 44]}
]

## 時間到之後

考試結束之後，請透過這個表單把你的程式碼（直接複製 stackblitz 網址，開無痕確認連的到即可）交上來：https://forms.gle/Z3vnKBCfe4zZXGoRA