做一個成績追蹤器

需求

使用者輸入「科目名稱 + 分數」，按新增後出現在清單；顯示目前平均；分數 ≥ 60 標示通過；可以刪除一筆。

你會用到的 HTML

<form>
  <input id="course" required>
  <input id="score" type="number" min="0" max="100" required>
  <button type="submit">新增</button>
</form>
<ul id="list"></ul>
<p id="average"></p>

資料模型

const courses = [
  { name: "Math", score: 90 }
];

你要自己完成的 function

addCourse(name, score)
removeCourse(index)
calculateAverage()
render()

事件流程

User submit
  ↓
Browser fires submit event
  ↓
callback reads input
  ↓
update courses array
  ↓
render()
  ↓
DOM changes
  ↓
Browser paints new UI

CSS 要求

卡片 max-width、表單用 Grid/Flex、pass/fail 有不同 class、手機寬度不橫向爆版、button 有 hover/focus-visible。