كيف يمكن تغيير التاريخ تلقائي في كل يوم في مشروع React

حتى تجعل التاريخ يظهر بشكل تلقائي في تطبيق React، استخدم كود JavaScript لجلب التاريخ الحالي، ثم اعرضه بدل أن تكتبه يدويًا.

• استخدم كائن من نوع Date.
• استخرج اليوم والشهر والسنة.
• اضبط التاريخ ليظهر على الشكل يوم-شهر-سنة.
• اعرض التاريخ داخل عنصر <h4>.

مثال:

const today = new Date(); 
const day = String(today.getDate()).padStart(2, '0'); 
const month = String(today.getMonth() + 1).padStart(2, '0'); 
const year = today.getFullYear(); 
const formattedDate = `${day}-${month}-${year}`;

في ملف JSX:

<div className="date"> 
  <h3>التاريخ</h3> 
  <h4>{formattedDate}</h4> 
</div>

وهكذا سيتم تحديث التاريخ تلقائيًا كل يوم بدون تدخل منك.

بخصوص التاريخ، فمن خلال كائن Date في جافاسكريبت كالتالي:

<span id="date"></span>
<script>
  function updateDate() {
    const today = new Date();
    document.getElementById('date').textContent = today.toLocaleDateString();
  }
  updateDate();
  setInterval(updateDate, 24 * 60 * 60 * 1000); 
</script>

الفكرة هنا في السطر:

  setInterval(updateDate, 24 * 60 * 60 * 1000);

حيث استخدمت دالة setInterval وحددت لها مدة 24 ساعة لتشغيل دالة updateDate.

حاول تنفيذ ذلك في مشروع React لكي تحقق استفادة.

أما مواقيت الصلاة، ستحتاج إلى API خاص بأوقات الصلاة، ويتوفر التالي:

• https://aladhan.com/prayer-times-api

بالطبع ستحتاج إلى قراءة المستند الخاص به وكيفية استخدامه من هنا:

• https://aladhan.com/prayer-times-api#get-/timingsByCity/-date-

مثال عند جلب مواقيت الصلات لمدينة القاهرة في دولة مصر بتاريخ اليوم:

• https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=cairo&country=egypt&method=8

حاول القيام بذلك بنفسك، لو واجهت صعوبة أخبرني.

كيف يمكن رفع المشروع على netlify حيث لانني اول مرة ارفع مشروع react اريده مشروع كرابط

لاحظ أنك تريد الحصول على تاريخ اليوم بتنسيق 

DD-MM-YYYY

لتقوم بإرساله في العنوان لديك كما تقوم أنت . ولكن تقوم بوضع التاريخ يدويا .

وللحصول على التاريخ بهذا التنسيق يمكنك إستخدام :

const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
}).split('/');
const current_date = `${formattedDate[1]}-${formattedDate[0]}-${formattedDate[2]}`

والآن يمكنك إستخدام current_date في العنوان كما تريد هكذا في دالة fetchPrayerTimer :

  useEffect(() => {
    const fetchPrayerTimer = async () => {
      try {
        const today = new Date();
        const formattedDate = today.toLocaleDateString('en-US', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
        }).split('/');
        const current_date = `${formattedDate[1]}-${formattedDate[0]}-${formattedDate[2]}`
        const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/${current_date}?city=Tr&country=${city}`)
        const data_Prayar = await response.json()

        setPrayerTime(data_Prayar.data.timings)
        setDataTime(data_Prayar.data.date.gregorian.date)


        console.log(data_Prayar.data.date.gregorian.date)

      } catch (e) {
        console.log(e)
      }
    }


    fetchPrayerTimer()
  }, [city])

بتاريخ 2 دقائق مضت قال Hxfhf Ucicic:

كيف يمكن رفع المشروع على netlify حيث لانني اول مرة ارفع مشروع react اريده مشروع كرابط

ستجد تفصيل هنا:

اين اكتب  هل في  Terminal؟

npm run build

بتاريخ الآن قال Hxfhf Ucicic:

اين اكتب  هل في  Terminal؟

npm run build

 

صحيح في منفذ الأوامر وسيتم تحزيم المشروع في مجلد باسم build أو dist لتجهيزه للنشر.

عند فتح تطبيق من خلال الهاتف هكذا شكله

كيف احل المشكلة

src.zip