网站上的天气

跟我看：把数据变成小部件

Open-Meteo 也能给未来几天预报。在地址里加你要的：

https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min,weathercode&timezone=auto

响应里有 daily.time（日期列表）、daily.temperature_2m_max、daily.temperature_2m_min（最高最低温）。同一顺序 = 第一天对第一个温度。

然后用循环做小部件：

<div id="pocasi" class="pocasi-widget"></div>

<script type="module">
  const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&daily=temperature_2m_max,temperature_2m_min&timezone=auto';
  const data = await (await fetch(adresa)).json();

  const dny = data.daily.time;
  const max = data.daily.temperature_2m_max;
  const min = data.daily.temperature_2m_min;

  let html = '';
  for (let i = 0; i < 3; i++) {
    const den = new Date(dny[i]).toLocaleDateString('en-US', { weekday: 'long' });
    html += `<div class="den">
      <strong>${den}</strong>
      <span>${Math.round(min[i])}–${Math.round(max[i])} °C</span>
    </div>`;
  }
  document.querySelector('#pocasi').innerHTML = html;
</script>

再加一点 CSS，像真小部件：

.pocasi-widget {
  display: flex;
  gap: 10px;
}
.pocasi-widget .den {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

轮到你了 💪

在项目合适的地方加天气小部件：

🏫 学校网站——做法

学校活动页：“郊游天气。“坐标设目的地——孩子和家长知道带什么。

🙋 个人网站——做法

页眉或页脚：你所在城市天气，个人 touch（“今天我这边 18 °C”）。

🌍 旅行日记——做法

每个计划旅行一个目的地预报小部件。换坐标就行。

⚽ 俱乐部网站——做法

比赛页：“周六比赛天气。“在地图上找球场坐标。加分：预计下雨就显示 “Bring a raincoat!”

💡

坐标从哪来？ 地图服务右键地点 → “What’s here?”——顶部显示坐标。

✅

检查一下： 网站有真实 3 天预报小部件，风格和设计一致。数据 live 从 API 加载。

这堂课你要记住

问号后面告诉 API 要什么（参数）。
用 for 循环把列表数据拼成 HTML。
JSON 里的数字变成真小部件——设计你来。

本课属于付费关卡

跟我看：把数据变成小部件

轮到你了 💪

这堂课你要记住