昨天我們把 Todo List 待辦事項給刻出來了，是不是很有成就感呢？

今天我們趁勝追擊，再來做兩個非常經典、而且會用到 JavaScript 數學與邏輯運算的小工具：

1. 簡易計數器（Counter）： 可以按加號數字往上加、按減號數字往下減。
2. 隨機抽籤機（Random Picker）： 輸入幾個選項，讓電腦幫你隨機決定今天要吃什麼！

工具一：簡易計數器（掌握變數與數值加減）

計數器的核心邏輯非常簡單：我們需要一個變數來記錄當前數字，然後透過按鈕的點擊事件來對它進行+1 或 -1
HTML 結構：

<div class="counter-box">
    <h2>目前數字：<span id="counter-value">0</span></h2>
    <button id="decrease-btn">- 減一</button>
    <button id="increase-btn">+ 加一</button>
</div>

JavaScript 邏輯：

// 1. 宣告一個變數用來記錄數字
let count = 0;

// 2. 抓取畫面上的數字顯示區與按鈕
const valueDisplay = document.querySelector('#counter-value');
const decreaseBtn = document.querySelector('#decrease-btn');
const increaseBtn = document.querySelector('#increase-btn');

// 3. 點擊「加一」按鈕時的動作
increaseBtn.addEventListener('click', function() {
    count = count + 1; // 數字加 1
    valueDisplay.textContent = count; // 更新畫面上的文字
});

// 4. 點擊「減一」按鈕時的動作
decreaseBtn.addEventListener('click', function() {
    count = count - 1; // 數字減 1
    valueDisplay.textContent = count; // 更新畫面上的文字
});

工具二：隨機抽籤機（認識 JavaScript 的隨機魔法）

如果想做一個「今天晚餐吃什麼？」的隨機抽籤機，我們需要用到 JavaScript 內建的數學函式 Math.random()

• 小亮點解析： Math.random() 會隨機產生存在 0 到 1 之間的小數，搭配陣列長度與 Math.floor()（無條件捨去），就能完美隨機抓出陣列裡的某一個項目！這在做抽獎、隨機輪播圖或互動小遊戲時超級常用。

今日小結

今天我們透過「計數器」跟「隨機抽籤機」兩個小工具，不僅複習了事件監聽跟 DOM 操作，還解鎖了 JavaScript 的數學與隨機運算能力。

我們的第三週（DOM 與互動）也即將進入尾聲，明天我們要來聊聊網頁中超常見的互動介面——彈跳視窗（Modal）與隱藏/顯示選單怎麼做！