الحل يجب ان يكون بالشكل التالي :
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
نعم يمكنك تعلم React ثم React Native الخاص بتطبيقات الجوال.
دورة تطوير التطبيقات باستخدام js المقدمة من حاسوب فيها كل من
أساسيات مكتبة React.js وبناء تطبيق ملاحظات باستخدامها
أساسيات مكتبة React Naive و Expo
تطوير تطبيق جوال للوصل بين الأطباء والمرضى بالاعتماد على React Native
بإمكانك الاطلاع على المزيد من التفاصيل من هنا :
https://academy.hsoub.com/learn/javascript-application-development/.
اهم ميزات React Native :
يمكن باستخدامه توليد واجهات استخدام لكل من iOS وأندرويد.
التطوير باستخدام رياكت نيتيف سهل وسريع وبكفاءة مقارنةً بغيره.
يسهل تعلم رياكت نيتيف على المطورين ذوي الخبرة بلغة جافا سكريبت، فلا حاجة لتعلم جافا Java للتخصص مع آندرويد أو سويفت Swift مع iOS.
روابط للاطلاع :
نعم تستطيع عمل صفحة Login باستخدام js لكن موضوع التحقق من كلمة السر وحتى تسجيل الدخول فإنه يحتاج إلى ربط الصفحة بـ API وذلك لأنك لا تستطيع الوصول لقاعدة البيانات من خلال الـ Frontend.
ليس من عمل مبرمج ال Frontend التحقق من صحة كلمة السر.
من front-end حيث لا تستطيع الوصول لهذه العناصر من ال back-end.
ال (DOM) Document Object Model هو تمثيل لل Document بشكل Objects حتى يسهل التعامل معه بشكل برمجي، أي انه يمثل كل ما تراه على صفحة الويب بشكل Objects تستطيع الوصول له وتعديله برمجياً.
مثال عليها
document.getElementById("p1").innerHTML = "New text!";
ال Browser Object Model (BOM) هو الطريقة التي تمكن js مع الحديث مع المتصفح نفسه
مثال عليها
window.alert("I am an alert box!");
هنالك شرح خلال الدورة لل best practices فيما يخص الامان وحماية البيانات
نعم يتم شرح أساسيات التطوير باستخدام معمارية MVC
سعر الدورة 290 دولار امريكي يعني حوال 1070 ريال سعودي
يمكنك قراءة تفاصيل الدورة و التسجيل من هنا :
https://academy.hsoub.com/learn/php-web-application-development/#WhatLearn
الكود يعمل بالشكل الصحيح عندما قمت بتشغيله عندي
لكن يبدو ان ال li التي تملك ال class المسمى fa-solid فارغة
<div class="card-icon">
<i class="fa-solid fa-circle-plus"></i>
<!-- <i class="fa-solid fa-circle-minus"></i> -->
</div>
وبالتالي لا تظهر على الشاشة وبالتالي لا تستطيع النقر عليها من الاصل
وظهرت مشكلة ثانية وهي ان العنصر iconsر في ملف ال JS غير معرف ولكن اظن ان هذه المشكلة حدثت لانك لم تشارك ملف ال JS بشكل كامل في سؤالك.
تاكد من انك تفقس على العنصر الصحيح صاحب ال class المسمى fa-solid ويمكن التاكد من ذلك عبر النقر على ctrl + shift + c على الكيبورد ثم الاشارة على العنصر كما في الصورة المرفقة
المشكلة التي تظهر عند اعادت كتابة الكود في ال console هي لأنك
قمت بتعريف المتغيرات من قبل في ملف ال JS
ثم تقوم بتعريفهم مرة اخرى عندما تقوم بلصق الكود في console
اذا لم يعمل الحل الذي ذكرته لك في الاعلى قم بمشاركة ملفات ال js و css
هل بإمكانك مشاركة نص المشكلة التي تشاهدها بالضبط وعلى كل حال فغالبا ما يكون سبب عدم الاشفة هو:
بطئ الموقع وضعف الاستضافة
موقعك غير مترابط بشكل كافي
بمعنى ليس لديك عدد كافي من الصفحات التي تشير للاخرى، وهنا تكم اهمية ملف ال sitemap وكذلك ملف robots.txt
جودة المقالات ضعيفة في الموقع الخاص بك
حيث ان المحتوي هو الملك لذا لا بد من الاهتمام به بشكل كبير للغاية لتتمكن من التغلب على المواقع الأخرى وكلما كانت جوده المحتوى أفضل كانت أرشفته أسرع و افضل أيضاً و سوف تلاحظ الفرق و يمكنك الاستعانة ببعض الأدوات التي تعينك على الكتابة لتتمكن من الحصول على مقالات احترافية.
كما شاهدت ان هنالك مشكلة في تحميل الصور في الموقع الخاص بك.
كما ان جوجل يقوم بتفضيل المواقع الكبيرة والقديمة والتي اثبتت قيمتها على المواقع الجديدة في موضوع الارشفة.
حسب ما فهمت انه المطلوب من خلال السؤال الخاص بك
(عند النقر على العنصر في القائمة الاولى يتم حذف العنصر الموافق من القائمة الثانية دون ان ينحذف العنصر من القائمة الاولى)
يكون الحل الصحيح بالشكل التالي
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);
//randomId قمت بتوليد
const randomId = Math.floor(Math.random() * 1000);
// في البداية li2 قمت بتعريف
// لأنني بحاجة لان ايكون هذا العنصر موجود كي اقوم بالاشارة إليه عند وضع الوظيفة الخاصة بالحذف في العنصر الثاني
let data2 = document.createTextNode(user_skil);
let li2 = document.createElement("LI");
li2.appendChild(data2);
li2.id = `li2${randomId}`;
list_2L.appendChild(li2);
let li = document.createElement("LI");
li.appendChild(data);
// قمت بإضافة وظيفة الحدذف التي تشير للأيدي الذي قمت بتعريفه
li.onclick = () => {
document.getElementById(`li2${randomId}`).remove();
};
list_1L.appendChild(li);
document.getElementById("user_skil").value = "";
}
ما فعلته انا هو انني عرفت ال li2 في البداية ثم اعطيت id قمت بتوليده بشكل عشوائي لل li2 عند تعريفه
const randomId = Math.floor(Math.random() * 1000);
li2.id = `li2${randomId}`;
وبعد ذلك قمت بإعطاء onClick لل li عند تعريفه حيث اقوم بالاتيان بال li2 من خلال ال id المعطى نفسه ثم اقوم بحدثه remove()
li.onclick = () => {
document.getElementById(`li2${randomId}`).remove();
};
كما قمت باضافة السطر
document.getElementById("user_skil").value = "";
من اجل تفريغ ال input بعد إضافة العنصر حتى لا يطر المستخدم للحذف ثم الكتابة إذا أراد إضافة عنصر جديد
حسب ما فهمت انه المطلوب من خلال السؤال الخاص بك
(عند النقر على العنصر في القائمة الاولى يتم حذف العنصر الموافق من القائمة الثانية دون ان ينحذف العنصر من القائمة الاولى)
يكون الحل الصحيح بالشكل التالي
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);
//randomId قمت بتوليد
const randomId = Math.floor(Math.random() * 1000);
// في البداية li2 قمت بتعريف
// لأنني بحاجة لان ايكون هذا العنصر موجود كي اقوم بالاشارة إليه عند وضع الوظيفة الخاصة بالحذف في العنصر الثاني
let data2 = document.createTextNode(user_skil);
let li2 = document.createElement("LI");
li2.appendChild(data2);
li2.id = `li2${randomId}`;
list_2L.appendChild(li2);
let li = document.createElement("LI");
li.appendChild(data);
// قمت بإضافة وظيفة الحدذف التي تشير للأيدي الذي قمت بتعريفه
li.onclick = () => {
document.getElementById(`li2${randomId}`).remove();
};
list_1L.appendChild(li);
document.getElementById("user_skil").value = "";
}
ما فعلته انا هو انني عرفت ال li2 في البداية ثم اعطيت id قمت بتوليده بشكل عشوائي لل li2 عند تعريفه
const randomId = Math.floor(Math.random() * 1000);
li2.id = `li2${randomId}`;
وبعد ذلك قمت بإعطاء onClick لل li عند تعريفه حيث اقوم بالاتيان بال li2 من خلال ال id المعطى نفسه ثم اقوم بحدثه remove()
li.onclick = () => {
document.getElementById(`li2${randomId}`).remove();
};
كما قمت باضافة السطر
document.getElementById("user_skil").value = "";
من اجل تفريغ ال input بعد إضافة العنصر حتى لا يطر المستخدم للحذف ثم الكتابة إذا أراد إضافة عنصر جديد
قم بالعمل على مشاريع متتالية و بشكل مستمر
لأن الانقطاع هو العدو رقم واحد في المسيرة التعليمية، فحاول ان لا تتوقف ابداً عن تنفيذ المشاريع والعمل، فكل لحطة تتوقف فيها عن العمل تعني تراجع مهاراتك.
لا تتردد كثيراً في النزول لسوق العمل
عندما تبدأ العمل بشكل رسمي لزبائن حقيقيين ستشاهد نفسك تبحث وتجتهد بشكل اكبر، لاسيما وانت تعلم انك ستنال ثمار تعبك بالنهاية، لكن لا تدخل لسوق العمل وانت لم تتعلم الاساسيات و المطلبات الخاصة بالعمل.
تابع المدونات الخاصة بتطوير واجهات المواقع ولاسيما الخاصة ببيئة العمل التي تستخدمها
وهذا مهم جداً للتعرف على الجديد في المجال و مهم من اجل التطور المستمر.
لا تصرف تعبك على مواقع كبيرة تقوم ببنائها فقط لغاية التدريب
الهدف الرئيس من العمل هو كسب المال، فلا تقوم بعمل مشروع كبير يصعب ان يطلبه احد، لكن قم بتصميم مواقع بسيطة مثل المدونات و مواقع البيع الالكتروني و المتاجر و المواقع الخاصة بالشركات، فتنفيذك لاي من هذه المواقع ممكن ان تقوم ببيعه مستقبلا.
كان هنالك سؤال سابق متعلق الموضوع