عمر قره محمد

للتحريك من الاسفل للأعلى يجب استخدام ال transform : 
div { margin: 30px auto; background-color: #5fd068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: transform 2s; transform-origin: bottom center; } div:hover { transform: scaleY(2); } حيث لا تستطيع التحكم باتجاه الحركة عند استخدام ال height لذلك نذهب لـ transform: scaleY(2) بدلاً عنها لأنها تمكننا من التحكم بال transform-origin، وبالتالي التحكم باتجاه الحركة.
إن كنت مهتم بالتحريك يمكنك قراءة هذا المقال عن ال animations : 
 

نعم يمكنك ذلك بإضافة الرمز # أثناء تعريف الـ  properties والـ methods في الـ class : 
class Something { // Private properties إضافة #property; constructor(){ this.#property = "test"; } // Private methods إضافة #privateMethod() { return 'hello world'; } getPrivateMessage() { return this.#property; } } const instance = new Something(); console.log(instance.property); //=> undefined console.log(instance.privateMethod); //=> undefined console.log(instance.getPrivateMessage()); //=> test console.log(instance.#property); //=> Syntax error لاحظ انه لا يمكن الوصول للكل من الـ private properties و الـ private methods إلا من داخل class.

اخي قمت بفحص اللعبة ووجدت هذه مشكلة في ال console :
YYGGames is not defined كما لاحظتُ ان اللعبة على السيرفر معمول لها build أي  انها نسخة production لأن الاكواد صعبة القراءة من قبل المطورين.
هل تعمل اللعبة بشكل جيد عندك على الحاسوب؟ أقصد نسخة ال production التي رفعتها على الاستضافة.
إذا كانت لا تعمل على حاسوبك اصلا فالمشكلة الحاصلة عندك هي حين الانتقال من نسخة المطور لنسخة ال production أي عند عمل ال build للمشروع.
للتاكد من ذلك قم بعمل build للمشروع و جرب تشغيل نسخة ال production على حاسبك، ثم اخبرني بالنتيجة.
 

نعم يوجد اختلاف وهو ان الـ method الأولى هي static methods : 
User.sayHi = function () { /* ... */ } فتعطي الوظيفة للـ class المسمى User فقط  
User.sayHi(); // will work fine بينما لن تورث هذه الـ method للأبناء المستنسخين من الـ class المسمى User 
const omar = new User(); omar.sayHi; // Uncaught TypeError: omar.sayHi is not a function وعلى الصعيد الاخر الـ method الثانية :
User.prototype.sayHi = function () { /* ... */ }
تعطي الظيفة للأبناء المستنسخين من الـ class المسمى User فقط ولن تستطيع الوصول له من خلال الكود التالي 
User.sayHi(); // Uncaught TypeError: User.sayHi is not a function ولكن  يمكن الوصول له من خلال الكود التالي 
const omar = new User(); omar.sayHi; // will work fine  
بعد قول هذا يجب ان تعلم ايضاً انه بإمكانك تعيين الـ static methods بطريقة اخرى وهي إضافة كلمة static قبل اسم ال method : 
class User{ constructor(name) { this.name = name; } static sayHi() { console.log("hi") } sayHaha(){ console.log("haha") } } User.sayHi(); // hi User.sayHaha(); // Uncaught TypeError: User.sayHaha is not a function const omar = new User() omar.sayHi(); // Uncaught TypeError: omar.sayHi is not a function omar.sayHaha(); // haha  
عادةً نستخدم ال static methods لعمل وظائق تتعلق بال class بشكل عام. ونورد المثال التالي : 
إذا اردنا أن نعمل طريقتين لتوليد article من الكلاس المسمى Article.
الاولى باستدعائه واعطاء المتغييرات (title, date). والثانية بتوليد article فارغ و date الخاص به هو اليوم. وبالتالي سنحتاج ان نعرف الـ class المسمى Article ونعطيه static method ولتكن createTodays : 
class Article { constructor(title, date) { this.title = title; this.date = date; } static createTodays() { // class أي انها تشير للـ this = Article لاحظ ان الـ //لن تعمل هنا this.title بمعى ان return new this("Today's digest", new Date()); } } let article = Article.createTodays(); alert( article.title ); // Today's digest لاحظ ان ال this داخل الـ static method تشير لل class وليس للأبناء المنتسخين.
وهنا تذكر ان : 
let article = new Article; article.createTodays(); // Uncaught TypeError: article.createTodays is not a function  

بدل ان يكون ال grid مقسم لثلاث صفوف اجعله مقسم ل 6 صفوف واعط الـ  h3  خمس نقاط طول و الـ h6 نقطة طول واحدة
وباقي العناصر تكون حصتها هي نقطتا طول لكل واحد بالشكل التالي : 
grid-template-areas: "h3 h1 h2" "h3 h1 h2" "h3 h4 h5" "h3 h4 h5" "h3 h7 h8" "h6 h7 h8"; اذا كنت عملت التصميم بطريقة غير ال grid قم بمشاركة الكود الخاص بك حتى استطيع مساعدتك.

المشكلة باستخدام ال margin لكل صورة على حدى انه عند تغير عرض الشاشة وعلى سبيل المثال فتح الموقع على الموبايل سيتوجب عليك وضع margin مختلف لكل صورة وهذا اصبل لديك عدد كبير من الاكواد لتنفيذ غرض بسيط، ولكن الاصح ان تستخدم
text-align: center; على الاب الخاص بالصورة و النص حيث سيكون متوافق مع كل الشاشات في هذه الطريقة.

المشكلة على ما يبدو انك اعطيت ال header : 
header { position: fixed; /* المشكلة هنا */ width : 100% } وهذا يجعله في طبقة منفصلة في الامام. 
للتغلب على هذه المشكلة بإمكانك إعطاء الـ 
<section class="content"> <div class="phone"> <p class="phone_des">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Adipisci nostrum harum voluptatem est odit, error, corporis blanditiis ad, dolorem laudantium aliquam libero soluta necessitatibus. Rerum dolorem ab porro distinctio et eius iure! Laudantium sint doloribus, officiis vel sequi quaerat, recusandae sunt ratione asperiores ipsam similique placeat est eum at voluptatum accusantium delectus omnis voluptatem ea explicabo qui. Sint inventore fuga dolor consequuntur amet eius provident nobis officiis nam doloremque doloribus modi, tempora excepturi? Cumque nostrum perspiciatis eligendi iusto dicta dolores tempore delectus accusantium harum! Placeat, sequi, blanditiis incidunt error dignissimos optio repudiandae enim eaque eius facilis inventore eos nulla laborum.</p> <img class="phone_img" width="250px" src="photos/phone.png" alt="noIMg"> </div> </section> margin-top يوافق طول ال header بالشكل التالي : 
.content{ margin-top: 100px; } واعطاء ال header خاصية ال top = 0 حيث يصبح : 
header { position: fixed; top: 0; /* التصحيح */ width: 100%; } فيصبح الشكل النهائي كالتالي  

ملف ال css بعد التعديل : style.css

الحل يجب ان يكون بالشكل التالي : 
function subL() { let list_1L = document.getElementById("list_li1_lL"); let list_2L = document.getElementById("list_li2_L"); let user_skil = document.getElementById("user_skil").value; let data = document.createTextNode(user_skil); // قمنا بتعريف متغير عشوائي const randomId = Math.floor(Math.random() * 1000); let li = document.createElement("LI"); li.appendChild(data); // قنا بإضافة ايدي فريد لكل عنصر نقوم بإضافته li.id = `li1_${randomId}`; list_1L.appendChild(li); let data2 = document.createTextNode(user_skil); let li2 = document.createElement("LI"); li2.appendChild(data2); // ومتغير فريد آخر لكل عنصر في القائمة الثانية كذلك li2.id = `li2_${randomId}`; list_2L.appendChild(li2); let myspan1 = document.createElement("span"); myspan1.innerHTML = "x"; // قمنا بإضافة الوظيفة التي ستحدث عند النقر myspan1.onclick = () => { // حيث يجلب العنصر عبر الايدي الذي اعطيناه إياه ثم يقوم بحذفه document.getElementById(`li1_${randomId}`).remove(); document.getElementById(`li2_${randomId}`).remove(); }; li.appendChild(myspan1); } ثم قومي بتكرار العملية نفسها لكافة الـ functions بنفس الطريقة

تحميل الملف بعد التعديل :  js.js

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