Thời tiết trên website của bạn

Xây widget đẹp với dự báo cuối tuần – hữu ích cho cả bốn loại dự án.

Open-Meteo cũng cho dự báo các ngày tới. Chỉ cần thêm vào địa chỉ những gì bạn muốn:

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

Trong response bạn tìm daily.time (danh sách ngày), daily.temperature_2m_max, và daily.temperature_2m_min (nhiệt cao nhất và thấp nhất). Cùng thứ tự = ngày đầu khớp nhiệt độ đầu.

Rồi bạn xây widget trong vòng lặp:

<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>

Và chút CSS để trông như widget thật:

.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;
}

Đến lượt bạn 💪

Thêm widget thời tiết ở chỗ hợp lý trong dự án:

🏫 Website trường học – giải pháp

Trang sự kiện trường: “Thời tiết cho chuyến dã ngoại.” Đặt tọa độ điểm đến – trẻ em và phụ huynh sẽ biết cần mang gì.

🙋 Website cá nhân – giải pháp

Ở header hoặc footer: thời tiết thành phố bạn như nét cá nhân (“Hôm nay ở thị trấn tôi là 18 °C”).

🌍 Nhật ký du lịch – giải pháp

Cho mỗi chuyến dự kiến, widget dự báo ở điểm đến. Chỉ cần đổi tọa độ cho địa điểm chuyến đi.

⚽ Website câu lạc bộ – giải pháp

Trang trận đấu: “Thời tiết cho trận thứ Bảy.” Tìm tọa độ sân trên bản đồ. Bonus: nếu dự báo mưa, hiện “Bring a raincoat!”

💡

Lấy tọa độ ở đâu? Trên dịch vụ bản đồ, nhấp phải vào vị trí → “What’s here?” – tọa độ hiện ở trên.

✅

Kiểm tra: Website có widget dự báo 3 ngày thật, styled khớp thiết kế. Dữ liệu tải trực tiếp từ API.

Những điều cần nhớ

Bạn báo API địa chỉ muốn gì bằng phần sau dấu hỏi (tham số).
Bạn xây dữ liệu từ danh sách thành HTML bằng vòng lặp for.
Số trong JSON trở thành widget thật – phần thiết kế do bạn cung cấp.

Bài này thuộc cấp có phí

Xem thử: biến dữ liệu thành widget

Đến lượt bạn 💪

Những điều cần nhớ