سكريبت عرض أوقات الصلاة في موقعك بسهولة – كود HTML وJavaScript

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

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

يعتمد هذا الكود على واجهة برمجة التطبيقات (API) لجلب المواقيت تلقائيًا بناءً على موقع المستخدم أو المحافظة المختارة، مما يضمن تحديثًا دقيقًا وفعالًا للمواعيد. تابع معنا لتتعرف على كيفية إضافة هذه الميزة إلى موقعك بخطوات بسيطة.

مميزات السكريبت

1.  عرض أوقات الصلاة تلقائيًا دون الحاجة إلى تحديث يدوي.
2. ✅ إمكانية اختيار المحافظة لعرض المواقيت بدقة.
3. ✅ تصميم أنيق ومتجاوب يتناسب مع مختلف الأجهزة.
4. ✅ كود بسيط وسريع التحميل يمكن دمجه بسهولة في أي موقع.

كيفية إضافة سكريبت مواقيت الصلاة إلى موقعك

1. كود HTML وCSS
2. انسخ الكود التالي وأضفه إلى موقعك أو صفحة مخصصة في مدونتك على بلوجر:

   <div class="prayer-times-widget">
     <h3>مواقيت الصلاة - اليمن</h3>
     <label for="province">اختر المحافظة:</label>
     <select id="province">
       <option value="sanaa">صنعاء</option>
       <option value="aden">عدن</option>
       <option value="taiz">تعز</option>
       <option value="marib">مأرب</option>
     </select>
     <p class="date" id="date"></p>
     <p class="month-year" id="month-year"></p>
     <p class="islamic-calendar" id="islamic-calendar"></p>
     
     <table>
       <thead>
         <tr>
           <th>الصلاة</th>
           <th>الوقت</th>
         </tr>
       </thead>
       <tbody id="prayer-times">
         <!-- سيتم تعبئة البيانات ديناميكياً -->
       </tbody>
     </table>
   </div>
   
   <script>
     const provinces = {
       sanaa: { lat: 15.3694, lng: 44.1910 },
       aden: { lat: 12.7855, lng: 45.0187 },
       taiz: { lat: 13.5795, lng: 44.0209 },
       marib: { lat: 15.4322, lng: 45.3183 },
     };
   
     const prayerTimesTable = document.getElementById("prayer-times");
     const provinceSelect = document.getElementById("province");
     const dateElement = document.getElementById("date");
     const monthYearElement = document.getElementById("month-year");
     const islamicCalendarElement = document.getElementById("islamic-calendar");
   
     function formatTimeTo12Hour(time) {
       let [hours, minutes] = time.split(":").map(num => parseInt(num));
       const period = hours >= 12 ? "م" : "ص";
       hours = hours % 12 || 12;
       minutes = minutes < 10 ? "0" + minutes : minutes;
       return `${hours}:${minutes} ${period}`;
     }
   
     function updateCalendar() {
       const today = new Date();
       const monthNames = ["يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر"];
       const islamicDate = new Date(today).toLocaleDateString("ar-SA-u-ca-islamic", { day: "numeric", month: "numeric", year: "numeric" });
   
       dateElement.textContent = `التاريخ الميلادي: ${today.getDate()} ${monthNames[today.getMonth()]} ${today.getFullYear()}`;
       monthYearElement.textContent = `الشهر الميلادي: ${monthNames[today.getMonth()]} ${today.getFullYear()}`;
       islamicCalendarElement.textContent = `التاريخ الهجري: ${islamicDate}`;
     }
   
     async function updatePrayerTimes(province) {
       const { lat, lng } = provinces[province];
       const today = new Date();
       const apiUrl = `https://api.aladhan.com/v1/timings/${Math.floor(
         today.getTime() / 1000
       )}?latitude=${lat}&longitude=${lng}&method=4`;
   
       try {
         const response = await fetch(apiUrl);
         const data = await response.json();
         const timings = data.data.timings;
   
         prayerTimesTable.innerHTML = `
           <tr><td>الفجر</td><td>${formatTimeTo12Hour(timings.Fajr)}</td></tr>
           <tr><td>الظهر</td><td>${formatTimeTo12Hour(timings.Dhuhr)}</td></tr>
           <tr><td>العصر</td><td>${formatTimeTo12Hour(timings.Asr)}</td></tr>
           <tr><td>المغرب</td><td>${formatTimeTo12Hour(timings.Maghrib)}</td></tr>
           <tr><td>العشاء</td><td>${formatTimeTo12Hour(timings.Isha)}</td></tr>
         `;
       } catch (error) {
         console.error("خطأ في جلب البيانات:", error);
         prayerTimesTable.innerHTML = `<tr><td colspan="2">تعذر تحميل المواقيت</td></tr>`;
       }
     }
   
     provinceSelect.addEventListener("change", (e) => {
       updatePrayerTimes(e.target.value);
     });
   
     updatePrayerTimes(provinceSelect.value);
     updateCalendar();
   </script>
   

طريقة إضافة الكود إلى بلوجر

1. انتقل إلى لوحة تحكم بلوجر > الصفحات > صفحة جديدة.
2. اختر وضع HTML ثم الصق الكود أعلاه داخل المحتوى.
3. احفظ الصفحة ثم قم بمعاينتها للتأكد من ظهور الأداة بشكل صحيح.

عرض ومعاينة أداة مواقيت الصلاة

بعد إضافة كود الأداة إلى مدونتك، يمكنك الآن معاينة الأداة في الصفحة للتحقق من كيفية ظهورها للزوار. تأكد من أن جميع الميزات تعمل بشكل صحيح، مثل تحديد المحافظة، عرض أوقات الصلاة، والتحديث التلقائي للبيانات.

يمكنك مشاهدة المعاينة الحية للأداة من خلال زيارة الصفحة التي أضفت فيها الكود. تأكد من النقاط التالية أثناء المعاينة:

1. ✔️ ظهور العنوان والنصوص بوضوح.
2. ✔️ إمكانية تغيير المحافظة وعرض أوقات الصلاة بناءً على الموقع المحدد.
3. ✔️ ظهور التاريخ الميلادي والتاريخ الهجري بشكل صحيح.
4. ✔️ توافق التصميم مع مختلف الأجهزة (الهاتف والكمبيوتر).

إذا لاحظت أي مشكلات أثناء المعاينة، يمكنك التأكد من أن الكود تم إدراجه بشكل صحيح أو مراجعة إعدادات المدونة. في حال واجهتك أي مشكلة، لا تتردد في طلب المساعدة!

نموذج لمعاينة الأداة

إذا كنت ترغب في تجربة الأداة قبل إضافتها إلى موقعك، يمكنك الضغط على معاينة.

1. معاينة مواعيد الصلاة

الخاتمة

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

مصادر:
https://www.mr-medo.net/2023/02/prayer-times-widget.html