Zen Eddin Allaham
-
المساهمات
944 -
تاريخ الانضمام
-
تاريخ آخر زيارة
-
عدد الأيام التي تصدر بها
37
نوع المحتوى
ريادة الأعمال
البرمجة
التصميم
DevOps
التسويق والمبيعات
العمل الحر
البرامج والتطبيقات
آخر التحديثات
قصص نجاح
أسئلة وأجوبة
كتب
دورات
كل منشورات العضو Zen Eddin Allaham
-
السلام عليكم اصبحت انفذ مشروع اوقات صلاة بستخدام ريأكت لوحدي, ما المشاريع التي يمكن قيام بها ايضاً واريده يكون اصعب من هذه التطبيق -
الان اصبحت افهم بضع من الاكواد التي اطبقها بفضلكم شكرأ جزيلاً لكم ☺️ لكن تبقى هذه الكود لم افهمه بشكل واضح const formatingTimes = (times) => { if(!times){ return "00:00"; } let [hours , minutes] = times.split(":").map(Number) const perd = hours >= 12 ? "PM" : "AM"; hours = hours % 12 || 12 return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}` }
- 2 اجابة
-
- 2
-
-
كيف ادمج نافذة console في متصفح
- 1 جواب
-
- 1
-
-
الى الان بصراحة لم افهم الدالة map بشكل واضح
-
هل يمكنكم شرح لي الدالات بالتفصيل وما وظيفتها fetch & map & json
- 4 اجابة
-
- 2
-
-
هل يمكنكم شرح لي هذه الكود بشكل افضل, import Prayer from "./components" import React,{useEffect, useState} from "react" function App() { const [prayerTimes , setPrayerTimes] = useState({}) const [dateTime , setDateTime] = useState("") const [citi , setCiti] = useState("Cairo") const citys = [ {name :"القاهرة" , value:"Cairo"}, {name :"الأسكندرية" , value:"Alexandria"}, {name : "الجيزة" , value: "Giza"}, {name :"المنصورة" , value:"Monsoura"}, {name :"الأسوان" , value:"Aswan"}, {name :"الأقصر" , value:"Luxor"}, ] useEffect(() => { const fetchPrayerTime = async () => { try{ const response = await fetch(`https://api.aladhan.com/v1/timingsByCity/24-05-2025?city=Eg&country=${citi}`); const data_Prayar = await response.json() setPrayerTimes(data_Prayar.data.timings) setDateTime(data_Prayar.data.date.gregorian.date) console.log(data_Prayar.data.date.gregorian.date); }catch(error){ console.log(error) } } fetchPrayerTime() },[citi]) const formateTimes = (time) =>{ if(!time){ return "00:00"; } let [hours , minutes] = time.split(":").map(Number) const perd = hours >= 12 ? "PM" : "AM"; hours = hours % 12 || 12; return`${hours}:${minutes < 10 ? "0" + minutes : minutes} ${perd}` } return ( <> <section> <div className="container"> <div className="top-section"> <div className="city"> <h3>المدينة</h3> <select name="" id="" onChange={(e) => setCiti(e.target.value)}> {citys.map((city) => ( <option key={city.value} value={city.value}>{city.name}</option> ))} </select> </div> <div className="date"> <h3>التاريخ</h3> <h4>{dateTime}</h4> </div> </div> <Prayer name="الفجر" time={formateTimes(prayerTimes.Fajr)}/> <Prayer name="الظهر" time={formateTimes(prayerTimes.Dhuhr)}/> <Prayer name="العصر" time={formateTimes(prayerTimes.Asr)}/> <Prayer name="المغرب" time={formateTimes(prayerTimes.Maghrib)}/> <Prayer name="العشاء" time={formateTimes(prayerTimes.Isha)}/> </div> </section> </> ) } export default App اعتذر ان كان الامر مزعج بالنسبة لكم
- 6 اجابة
-
- 1
-
-
ما الفرق بين js & jsx في المشاريع
- 7 اجابة
-
- 1
-
-
بصراحة اواجه بعض الصعوبات في بناء تطبيق اوقات صلاة في ريأكت هل هذا امر طبيعي
-
لم افهم لماذا حذف سطر 33 هو عبارة عن حواف للكونتينر border: 1px solid #d7d7d74e;
-
عند فتح تطبيق من خلال الهاتف هكذا شكله كيف احل المشكلة src.zip
- 7 اجابة
-
- 2
-
-
عند فتح تطبيق من خلال الهاتف هكذا شكله كيف احل المشكلة src.zip
-
اين اكتب هل في Terminal؟ npm run build
-
كيف يمكن تغير التاريخ تلقائي في كل يوم src.zip
- 8 اجابة
-
- 2
-
-
ماذا يحدث عند الفشل في امتحان الدورة
- 3 اجابة
-
- 3
-
-
لدي مشكلة غريبة نوعاً ما حيث عند استدعاء </Prayer> الذي قمت بأنشائه تختفي جميع العناصر src.zip
- 4 اجابة
-
- 3
-
-
لدي مشكلة غريبة نوعاً ما عند استدعاء</Prayer> الذي قمت بأنشائه تختفي جميع العنصار src.zip
-
ما الفرق بين height & min-height
- 3 اجابة
-
- 2
-
-
ماهو هذا العنصر في HTML <select name="" id=""></select>
- 4 اجابة
-
- 4
-
-
اقصد عندما مثلا onclick من اجل تنفيذ الدالة اريد ان اكتبها مراة واحدة ولكن في اربع اسطر مثال في صورة
- 8 اجابة
-
- 1
-
-
كيف يمكن كتابة اربع اسطر في نفس الوقت
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>ِApple</title> </head> <body> <div class="container"> <header> <a href="#"><img src="logo.png" class="logo" alt=""></a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Project</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </header> <div class="content"> <div class="text"> <h2>iPhone 13 pro max</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <a href="">All Products</a> </div> <div class="img"> <img src="0.png"> </div> </div> <div class="icons"> <img id="img-preview" onclick="phones(this.src); colors('#000')" src="0.png"> <img id="img-preview" onclick="phones(this.src); colors('#000')" src="1.png"> <img id="img-preview" onclick="phones(this.src); colors('#247ec8')" src="2.png"> <img id="img-preview" onclick="phones(this.src); colors('#1e1e1e')" src="3.png"> <img id="img-preview" onclick="phones(this.src); colors('green')" src="4.png"> </div> </div> <script src="index.js"></script> </body> </html> let images = document.querySelector('.icons') let container = document.querySelector('.container') let image = document.getElementById('img-preview') function phones(phone){ image.src = phone; } function colors(color){ container.style.background = color; } لقد نفذت الكود لكن ليس هذا الذي اريده حيث لاحظ في صورة لا اريد ان تظهر الصورة في الاسفل احتاج عند ضغط على صور الهاتف الاحمر مثلا يعرض مكان الهاتف الذهبي وهكذا
-
let images = document.querySelector('.icons') let container = document.querySelector('.container') function phones(phone){ images.src = phone; } function colors(color){ container.style.background = color; } *{ padding: 0; margin: 0; box-sizing: border-box; font-family: sans-serif; } .container{ background-color: #000; min-height: 100vh; width: 100%; overflow: hidden; position: relative; } header{ display: flex; justify-content: space-between; width: 80%; align-items: center; margin: auto; padding: 20px 0; } .logo{ width: 40px; } ul li { display: inline-block; } ul li a{ color: white; text-decoration: none; margin: 0 10px; } .content{ display: flex; justify-content: space-between; align-items: center; width: 80%; margin: auto; } .content .text{ width: 40%; color: white; } .content .text h2{ font-size: 40px; text-transform: uppercase; } .content .text p{ font-size: 18px; margin: 20px 0; } .content .text a{ text-decoration: none; background-color: white; color: #000; font-weight: bold; padding: 8px 15px; border-radius: 20px; cursor: pointer; } .content .img{ width: 30%; } .content .img img{ width: 180px; } .icons{ position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); bottom: 20px; } .icons img{ width: 40px; transition: all 0.5s ease; cursor: pointer; } .icons img:hover{ transform: scale(1.2); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> <title>ِApple</title> </head> <body> <div class="container"> <header> <a href="#"><img src="logo.png" class="logo" alt=""></a> <ul> <li><a href="#">Home</a></li> <li><a href="#">Project</a></li> <li><a href="#">News</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </header> <div class="content"> <div class="text"> <h2>iPhone 13 pro max</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p> <a href="">All Products</a> </div> <div class="img"> <img src="0.png"> </div> </div> <div class="icons"> <img onclick="phones(this.src); colors('#000')" src="0.png"> <img onclick="phones(this.src); colors('#000')" src="1.png"> <img onclick="phones(this.src); colors('#247ec8')" src="2.png"> <img onclick="phones(this.src); colors('#1e1e1e')" src="3.png"> <img onclick="phones(this.src); colors('green')" src="4.png"> </div> </div> <script src="index.js"></script> </body> </html> لقد قمت بمشروع لكن اريد عند ضغط على صورة تظهر في المتصفح
- 8 اجابة
-
- 2
-
-
هل يمكن تحقيق ربح من خلال HTML & CSS ام لا
- 4 اجابة
-
- 3
-
