習作5 - 完成答案版

✓ 1a 答案

CSS 代碼：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

.profile-card {
  width: 300px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  background: white;
  text-align: center;
  position: relative;
}

.header {
  height: 120px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 12px 12px 0 0;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid white;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  object-fit: cover;
}

說明： 使用 Flexbox 居中卡片，linear-gradient 創建漸層背景，border-radius 創建圓形頭像。

✓ 1b 答案

.follow-btn {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 28px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.follow-btn:hover {
  background: #2563eb;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

說明： 使用 transition 和 hover 偽類實現平滑的互動效果，包括顏色變化、縮放和陰影。

✓ 2a 答案

let maxUser = users[0];
for (let i = 1; i < users.length; i++) {
  if (users[i].followers > maxUser.followers) {
    maxUser = users[i];
  }
}
console.log(maxUser.name);  // "Bob"

或使用 reduce()：

let maxUser = users.reduce((max, u) => u.followers > max.followers ? u : max);
console.log(maxUser.name);

✓ 2b 答案

let total = 0;
for (let i = 0; i < users.length; i++) {
  total += users[i].followers;
}
let average = total / users.length;
console.log(average);  // 176.67

或使用 reduce()：

let average = users.reduce((sum, u) => sum + u.followers, 0) / users.length;

✓ 2c 答案

function findUserByName(users, name) {
  for (let i = 0; i < users.length; i++) {
    if (users[i].name === name) {
      return users[i];
    }
  }
  return null;
}

// 調用
let user = findUserByName(users, "Alice");
console.log(user);  // { id: 1, name: "Alice", followers: 150, following: 80 }

或使用 find()：

let user = users.find(u => u.name === "Alice");