يمكنك الان شراء مساحة اعلانية علي موقعنا معرفه المزيد

اعلان

سكريبت حالة الطقس لعرض درجة حرارة الطقس في بلوجر

اضافه اداه حالة الطقس إلى مدونه بلوجر يقوم الاسكربت بالتعرف على اسم المدينة من متصفح المستخدم وبعد يعرض درجة الحرارة
الرجاء الانتظار 0 ثانية...
قم بالتمرير لأسفل وانقر فوق فتح الرابط للتوجيه
تم فحص وتجهيز الرابط

الأن أصبح بامكاننا تصفح المواقع أو المدونات و مشاهدة حالة الطقس مباشرة وبدون الحاجة الى مغادرة الموقع أو المدونة التي نتصفحها للذهاب الى مواقع متخصصة بعرض حالات الطقس. اليوم نشرح لكم في مدونه مستر ميدو اضافه بسيطة و مميزة لمدونات بلوجر هي اضافة تمكن زائر مدونتك معرفة حالة الطقس ودرجة حرارة الجو في مدينته.

Weather widgets حالة الطقس

سكريبت لعرض حالة الطقس

هذا كود جافا سكريبت لعرض معلومات الطقس لمدينة معينة. يتم الحصول على موقع المستخدم الحالي عن طريق API الخاص بالموقع ومن ثم يتم الحصول على إسم المدينة باستخدام خدمة API لمعرفة إسم المدينة عن طريق تحديد خطوط الطول والعرض. ثم يتم الحصول على معلومات الطقس للمدينة الحالية عن طريق API من موقع Openweathermap.org. وتحديداً، يتم عرض الحرارة الحالية وإسم المدينة على صفحة الويب.

اضافة اداة حالة الطقس الى بلوجر

لاضافة سكريبت Weather widgets حالة الطقس الى مدونة بلوجر وتعمل بشكل صحيح عليك اتباع الشرح والخطوات بعناية.

  1. - اذهب الى موقع Openweathermap.org وانشاء حساب واستخرج مفتاح API_KEY خاص بك.
  2. - اذهب الى الصفحه الرئيسيه بلوجر.
  3. - من القائمه في الجانب الايمن اذهب الى الصفحات.
  4. - قم بانشاء صفحه جديده واعطيها اسم Weather.
  5. - قم بنسخ الكود التالي والصقه في الصفحه الذي انشاتها.

هذا الكود قابل للتطوير، يمكن إضافة مزيد من المعلومات عن الطقس على سبيل المثال، الضغط الجوي والرطوبة ومدة الشمس وغير ذلك. يمكن أيضًا تخصيص تصميم الناتج وتحسين تجربة المستخدم بما يناسبك.

<div id="weather"></div>
<script>
const API_KEY = "your_api_key_here";
const weatherElement = document.querySelector("#weather");
async function getWeather() {
  try {
    const position = await getCurrentPosition();
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    const city = await getCityName(lat, lon);
    const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}`);
    const data = await response.json();
    const temperature = data.main.temp - 273.15;
    weatherElement.innerHTML =  `<p class="note">Temperature in ${city}: ${temperature.toFixed(1)}°C.</p>`;
  } catch (error) {
    weatherElement.innerHTML = `<p class="note wr">Error: ${error.message}.</p>`;
  }
}
async function getCurrentPosition() {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(resolve, error => {
      reject(error);
    });
  });
}
async function getCityName(lat, lon) {
  const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}`);
  const data = await response.json();
  return data.name;
}
getWeather();
</script>
<style>
  #weather {
    text-align: center;
    font-family: Arial, sans-serif;
  }
  
  .note {
    color: #333;
    font-size: 20px;
  }
  
  .wr {
    color: red;
  }
  
  .week-forecast {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    font-size: 18px;
    display: inline-block;
  }
  
  .week-forecast li {
    margin: 10px 0;
  }
</style>
<div id="weather"></div>

شرح الكود والتعديل عليه

هذا الكود يقوم بعرض درجة حرارة الطقس في مدينة معينة على الصفحة الخاصة بك. يتم الحصول على موقع الجهاز الحالي باستخدام دالة getCurrentPosition و تحويل إحداثيات الطول و العرض إلى اسم المدينة باستخدام دالة getCityName. ثم يتم الإطلاع على درجة حرارة الطقس في هذه المدينة باستخدام API الخاص ب OpenWeatherMap. وفي النهاية، يتم عرض الدرجة الحالية لدرجة حرارة الطقس على الصفحة على العنصر الذي يتم تحديده بواسطة الإختيار #weather.
يتم تخزين مفتاح API خاص بك في المتغير API_KEY. الدالات getCurrentPosition و getCityName كلاهما تعد دالات تابعة لإجراء عملية غير متزعجة و تعطي إشعاراً إذا كانت العملية ناجحة أو لم تنجح. و عند عدم النجاح، ستعرض الدالة الخاصة بعرض الخطأ الذي حدث.
يتم تشغيل الدالة getWeather عند تحميل الصفحة و يتم تشغيل الدالات الأخرى من داخل دالة getWeather.

ينتهي هنا موضوعنا عن "سكريبت حالة الطقس لعرض درجة حرارة الطقس في بلوجر"، ونلتقي في موضوع جديد على مدونة مستر ميدو. دمتم في امان الله :)

عن الكاتب

عبدالحميد ميدو، مصمم فلاتر سنابشات ومنشئ محتوى رقمي بخبرة تزيد عن 7 سنوات. لدي شغف بأحدث التقنيات، اهتمامًا خاصًا بلغات البرمجة كـ Python, JS وCSS.

إرسال تعليق

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق.
1 -أ ن يكون التعليق خاص بمحتوى التدوينة ❗
2 - أن لا تضع أي روابط خارجية❗
3 - أي سؤال خارج محتوى التدوينة يتم حذفه ❗
4 - لإضافة كود برمجي حوله أولاً بمحول الأكواد.
5 - لضمان نشر تعليقك يلزمك مراجعة اتفاقية الإستخدام.
ملفات تعريف الارتباط
نستخدم ملفات تعريف الارتباط (Cookies) لفهم كيفية استخدامك لموقعنا وتحسين تجربتك في المحتوى والإعلانات. باستمرارك في تصفح الموقع، فإنك توافق على استخدامنا لملفات تعريف الارتباط وفقًا لسياسة الخصوصية لدينا.
Oops!
يبدو أن هناك خطأ ما في اتصالك بالإنترنت.
يرجى الاتصال بالإنترنت والبدء في التصفح مرة أخرى.
يرجى السماح بعرض الإعلانات
يبدو أنك تستخدم أداة لحظر الإعلانات Adblock.
نحن نعتمد على الارباح التي نحققها من الإعلانات كمصدر تمويل لموقعنا الإلكتروني.
Site is Blocked
Sorry! This site is not available in your country.