---
tags: Vue 實戰班
---

# 新手組任務說明

## Day 5 (6/19)
人在江湖誠信最重要，為了避免糾紛需要紀錄每個鎮上居民的借款金額，小明又撰寫了一個工具來統計~~用戶的借款記錄~~小明的助人紀錄。

也因為如此，小明很快迎來第一個客人，鎮上想要自己開店的小杰

#### 任務：

- 新增鄰居姓名、借款金額的欄位
- 新增一個陣列，用來儲存所有用戶的借款記錄
- 每個陣列內都是一個物件，物件內包含了借款人、借款金額的欄位
- 當輸入姓名、金額 送出以後，則會新增一筆資料於借款陣列內
- 預設先新增一筆用戶紀錄
- 將陣列內的資料呈現於畫面上，包含
- 借款的總人數（陣列長度）
- 貸款總金額（迴圈金額計算）
- 欠款人的資料

參考畫面：

<div>
    鄰居姓名：<input type="text">
    鄰居貸款金額：<input type="number">
    <button>送出</button>
</div>
<hr>
<div id="display">目前借貸人數 1</div>
<div id="displayTotal">目前借貸總金額 50000</div>
<ul id="loanList">

</ul>

#### 學習重點：

- 陣列的新增技巧：（[https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/push](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/push)）
- 陣列方法：[https://wcc723.github.io/javascript/2017/06/29/es6-native-array/](https://wcc723.github.io/javascript/2017/06/29/es6-native-array/)

#### 普通挑戰：

- 完成以上功能

#### 英雄挑戰（不提供解法）：

- 完成編輯、刪除特定用戶的功能

#### 批改重點：

- 程式執行功能是否正確
- 型別轉換是否正確

## Day 4 (6/18)
小明認為，要呈現自己在「借款」領域的專業，就需要準備一台計算計算機，因此就自幹了一台計算機來解決工作上的需求。

#### 任務：

- 畫面上陳列數字 0 ~ 9、運算符號、計算的按鈕、呈現結果的區塊
- 新增第一組數值、第二組數值的變數
- 每次按下任何數字，都會將第一組數值顯示在畫面上
- 按下運算符號後，則會進入第二組數值
- 按下任何數字後，則會將第一組、運算符號、第二組數值呈現在畫面上
- 按下 計算 的按鈕，則會計算以上的結果（呈現整數即可）
- 計算結果後清除第一組、第二組、運算符號的變數內容

範例程式碼：

<div id="display"></div>
  <div>
    <button class="number">0</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="number">3</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="number">6</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="number">9</button>
  </div>
  <div>
    <button class="operation">+</button>
    <button class="operation">-</button>
    <button class="operation">*</button>
    <button class="operation">/</button>
  </div>

#### 作業說明影片：

說明影片（在此看 Day4 即可）：https://courses.hexschool.com/courses/javascript1/lectures/19703350

#### 學習重點：

- 變數儲存的靈活運用
- 迴圈的基本運用
- 文字串接在畫面上的技巧
- 利用判斷式決定第一組、第二組變數的運作

#### 普通挑戰：

- 輸入文字到畫面的呈現（不製作計算）

#### 英雄挑戰（不提供解法）：

- 完成計算功能

#### 批改重點：

- 程式執行功能是否正確
- 型別轉換是否正確

## Day 3 (6/17)

杰倫對小明乞討的概念回應：「這個方式很遜，我們有錢人是不會做乞討的行為」，與小明提到「助人為快樂之本」，可以將「將資金借給需要的人」。由杰倫出錢小明去尋找鎮上需要幫助的人，借款後再收取微薄費用作為利息，不僅能夠賺錢更能助人。

小明最喜歡幫助人了，別人的事情就是他的事情，但在開始前需要一個簡單的工具，用來計算是否可以借錢給需要的人。

#### 任務：

- 杰倫預設有 5,000,000 元
- 鄰居的借款金額審核
- 填寫一個金額，並且計算是否符合借款標準
- 借款標準及利息，金額太低代表此人不需要幫助，越需要幫助的人利息越低
- 借款低於 1000 元，不借款
- 1001 ~ 10000 年利率 20%
- 10001 ~ 100000 年利率 18%
- 100001 年利率 15%
- 於畫面上
- 呈現借或不借，當不借的時候「鄰居決定貸款」的按鈕加上 disabled，反之移除
- 以及 1 ~ 3 年期的累計年利率
- 數字都以整數呈現
- 增加一個按鈕 「鄰居決定貸款」
- 決定貸款後重新計算杰倫還有多少費用
- 清空上方的資料內容

金額太少不借款

試算利息金額

預估成效

範例程式碼：

<input type="number" id="input"> 鄰居的貸款金額
<button id="submit">送出</button>

<div>貸款結果：<span id="result"></span></div>
<ul>
    <li>一年期：<span id="oneYear"></span></li>
    <li>二年期：<span id="twoYears"></span></li>
    <li>三年期：<span id="threeYears"></span></li>
</ul>
<button id="loanBtn">鄰居決定貸款</button>
<hr>
<div>杰倫還剩下：<span id="remaining"></span></div>
<div>三年後會有多少錢：<span id="profit"></span></div>
<hr>

#### 作業說明影片：

說明影片（Day2 ~ Day3 放在一起，在此看 Day3 即可）：https://courses.hexschool.com/courses/javascript1/lectures/19360560

#### 學習重點：

- 判斷式的運用
- 型別轉換、parseInt 轉換成整數
- 數字累算

#### 普通挑戰：

- 完成 1 ~ 3 年期的計算方式即可（確定借款不需要製作）

#### 英雄挑戰（不提供解法）：

- 使用陣列完成 1 ~ 3 年期的統計方式
- 完成「確定借款」功能

#### 批改重點：

- 程式執行功能是否正確
- 型別轉換是否正確

---

## Day 2 (6/16)

小明在討教前也準備了自己的構想，白手起家就要做無本生意，小明與杰倫說到：「想在這小鎮上進行乞討，不需要資金也可以開始動手」

開始動手乞討前，小明還準備了一個小工具，每當收到乞討費用或支出都可以記錄！

#### 任務：

- 在畫面上新增一個 input、兩個按鈕以及呈現文字的區塊
- 按鈕可以觸發新增、減少錢的事件，用來讀取 input 的欄位做計算
- 小明預設有 1000 元，每次新增、減少都會呈現最終費用於畫面上


參考 HTML 結構：

<input type="number" id="input">
<button id="addMoney">小明增加錢</button>
<button id="reduceMoney">小明扣錢</button>
<div>小明現在有的錢：<span id="mingMoney"></span></div>
<hr>

#### 作業說明影片：

說明影片（Day2 ~ Day3 放在一起，在此看 Day2 即可）：https://courses.hexschool.com/courses/javascript1/lectures/19360560

#### 學習重點：

- input 取得的都是字串，計算前需要先做到**型別轉換**
- 計算運算子的計算方式

#### 普通挑戰：

- 完成基本計算功能

#### 英雄挑戰（不提供解法）：

- 加 / 減 只能使用一個函式
- 避免出現 NaN 的判斷邏輯

#### 批改重點：

- 程式執行功能是否正確
- 型別轉換是否正確

---

## Day 1 (6/15)

真心鎮大冒險 番外篇：

因為追求漂亮阿姨的關係，小明最近手頭非常緊，於是他找到家境不錯的好友「杰倫」，想跟他討教賺大錢的方式。不過杰倫平時也不是很好聯絡，因此小明決定先開發一款用於通訊的小工具，便於與杰倫討論相關事宜。

#### 任務：

1. 在畫面上呈現小明、杰倫的區塊
2. 區塊內分別有 input, button 以及呈現文字的地方
3. 在小明的區塊內，可以將文字發送到杰倫的區塊內，反之亦可
4. 發出訊息後，須清空 input 欄位

示意圖片：


參考 HTML 結構：

<input type="text" id="mingInput">
<button id="mingBtn">小明發出訊息</button>
<div>小明收到的訊息：<span id="mingMsg"></span></div>
<hr>
<input type="text" id="jayInput">
<button id="jayBtn">杰倫發出訊息</button>
<div>杰倫收到的訊息：<span id="jayMsg"></span></div>

#### 作業說明影片：

說明影片：https://courses.hexschool.com/courses/924133/lectures/18859449

#### 學習重點：

- 了解如何取得畫面元素 `document.querySelector`
- 了解如何製作事件監聽及觸發事件 `addEventListener`、`function`
- 了解如何將資料寫在畫面上：[https://www.fooish.com/javascript/dom/](https://www.fooish.com/javascript/dom/)
- 主要了解 textContent、value、innerHTML

#### 普通挑戰：

- 完成雙邊溝通的功能

#### 英雄挑戰（不提供解法）：

- 雙邊溝通只能使用一個函式（參數）

#### 批改重點：

- 程式執行功能是否正確

var mingMoney = 1000;
var mingTotal = document.querySelector('#mingTotal');
var input = document.querySelector('#input');
var addMoneyBtn = document.querySelector('#addMoney');
var reduceMoneyBtn = document.querySelector('#reduceMoney');

mingTotal.textContent = mingMoney;
addMoneyBtn.addEventListener('click',addMoney);
function addMoney(){
  mingTotal.textContent = mingMoney += Number(input.value);
  input.value = '';
  return input;
}

reduceMoneyBtn.addEventListener('click',reduceMoney);
function reduceMoney(){
  mingTotal.textContent = mingTotal.innerText -= input.value;
  input.value = '';
  return input;
}

英雄挑戰：