[المهمة الأخير] تطبيق خلاصة كل ما تعلمتة في دروس الجافاسكربت

[Asmaa]

كان مطلوب في هذه الورشة عمل محرك بحث كهذا …

وهذا تطبيقي … انتظر ارائكم للاستفاده منها

https://codepen.io/asmaaebeed/pen/qYBNYd

[mgandali]

جميل عملك اسماء لديك خبرة جميلة بالبرمجة

[mgandali]

هل من الممكن من استاذ محمد فتح ورشة عمل لتنفيذ عمل محرك بحث

[Asmaa]

شكرا اخي … انا خبرتي بالبرمجه من خلال المنحة فقط واحاول اطور نفسي … الله يوفقنا جميعا

[Asmaa]

انا اتمني ان تبدأ الورش مرة اخري … انا بحاول اراجع التطبيقات اللي ما لحقت انجزها وقت المنحة وانفذها الان … بس المشاركة والتنافس كانت بتحفز الواحد اكثر لذلك شاركت التطبيق معاكم

[Alhakem]

سأطلع عندما اكون على جهاز الكمبيوتر

[Asmaa]

في انتظار رأيك

[Nabila]

Well done @Asmaa

[Alhakem]

ماشاء الله جميل جداً

أريد منك تجنب إضافة تنسيقات الـ css بشكل مباشر من الجافاسكربت على سبيل المثال في الكود التالي:د

availableDiv.style.color = "#9dffa4";
availableDiv.style.fontSize = "24px";

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

availableDiv.classList.add("mewstyle");

هذه الأسطر بالإمكان الإستغناء عنها وتنفيذ ما تقوم به بطريقة أخرى أقل تكلفة

prodDiv.innerHTML = "";
priceDiv.innerHTML = "";
availableDiv.innerHTML = "";
resultClass.style.height = "0px";
mobImg.style.height = "0px";
soldImg.style.display = "none";
avalImg.style.display = "none";

كذلك طريقة إضافة الصور بالإمكان تحسينها فبدلاً من إضافة الصور جميعها لمستند الـ html ومن ثم إخفائها ثم إستدعائها بالإمكان الإستفادة من الجافاسكربت بإضافة الصورة المطلوبة فقط.

 <div id = "images">
     <img src="http://i66.tinypic.com/bgbath.png" alt="Mob." class ="mobimg">
            
     <img src="http://i63.tinypic.com/96hxyv.png" alt = "Aval." id = "avalimg">
            
     <img src = "http://i63.tinypic.com/23wqqli.jpg" alt = "sold" id ="soldimg">
</div>

في مستند الـ HTML قمتي بإضافة هذه العناصر:

<p>Choose mobile <i>samsung, iphone, huawai, lenovo, nokia, alcatel</i></p>

سيكون من الرائع أن تجعلي الموقع أكثر ديناميكية ويستفيد من أسماء بعض المنتجات التي تم تخزينها في المصفوفة لعرضها كمثال بدلاً من كتابتها بشكل مباشر.

---

حقيقة أبدعتي بالعمل وفي الوقت الحالي البرنامج يقوم بعملة بالشكل المطلوب وبعد أن وصلتي لهذه النتيجة أريد منك التدريب بإعادة كتابتة بعدد أقل من الأسطر البرمجية حتى وان لزم الأمر إعادة هيكلة مستند الـ HTML

[Asmaa]

شكرا اليك علي مراجعتك وملاحظاتك وان شاء الله سيتم التعديل … انا مشاركة التطبيق مخصوص لانتظار هذه الملاحظات

[Alhakem]

لا شكر على واجب، أطلعيني علية بمجرد ما تنتهي منه

[Asmaa]

@Alhakem

بعتذر عن تأخيري في تنفيذ الملاحظات
تم الأنتهاء منها ما عدا ملاحظة واحدة وهي

@Alhakem

هذه الأسطر بالإمكان الإستغناء عنها وتنفيذ ما تقوم به بطريقة أخرى أقل تكلفة

prodDiv.innerHTML = “”;
priceDiv.innerHTML = “”;
availableDiv.innerHTML = “”;
resultClass.style.height = “0px”;
mobImg.style.height = “0px”;
soldImg.style.display = “none”;
avalImg.style.display = “none”;

لم اتمكن من الوصول للبديل

لكن باقي الملاحظات عملت عليها وانتظر مراجعتك

asmaaEbeed/Search-engine

وسؤال ارهقني جداا … هل الجافا سكريبت لا تقبل image الا بامتداد .svg ???
او عند اضافتها من خلال ال style.background => لا تقبل غير .svg

[mofi]

استاذ محمد ياريت تبدأ تعطينا عمل تطبيقات كما في منتدى مليون مبرمج عربي لأنها كانت مفيدة جدا بارك الله فيك