الطقس على موقعك

شاهد معي: تحويل البيانات إلى أداة

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

دورك الآن 💪

أضف أداة طقس حيث يناسب في مشروعك:

ما ستخرج به من هذا الدرس

• تخبر عنوان API بما تريد بالجزء بعد علامة الاستفهام (المعاملات).
• تبني بيانات من قوائم إلى HTML بحلقة for.
• أرقام في JSON تصبح أداة حقيقية – أنت تقدّم التصميم.

© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى