أفضل المشاريع لمحفظة الأعمال بلغة JavaScript: من المبتدئ إلى المحترف

لماذا تحل المحفظة كل شيء، أو كيف لا تعلق عند مستوى "Hello, World"

في مقابلات JavaScript، لا ينظر صاحب العمل إلى قائمة الدورات التي أكملتها، بل إلى ثلاثة أشياء: الكود، والمنطق، والقدرة على إنجاز المهمة حتى النهاية. إن مشاريع محفظة الأعمال بلغة JavaScript هي الجسر بين "أعرف النظرية" و"أستطيع حل مشكلة عمل".

مشكلة العديد من المبتدئين هي أنهم يعلقون في دروس تعليمية لا نهاية لها. "قم بعمل 10 مشاريع في أسبوع" - يبدو رائعًا، لكن النتيجة هي 10 نسخ مكررة من نفس الآلة الحاسبة. أقترح طريقًا مختلفًا: 5 مشاريع تظهر مستواك الحقيقي وتغطي 90% من متطلبات وظائف مطور JavaScript مبتدئ/متوسط.

في هذه المقالة، ستجد ليس فقط أفكارًا، بل حلولًا معمارية جاهزة، وأجزاء من كود حقيقي، وشرحًا لماذا هذا المشروع بالتحديد سيميزك عن حشد المرشحين. هيا بنا؟

1. قائمة المهام بمنطق متقدم: ليس مجرد "إضافة-حذف"

أكثر مشروع عادي في العالم. لكن إذا قمت به مثل أي شخص آخر - لن يتم ملاحظتك. قم بعمل لوحة كانبان مع السحب والإفلات بلغة JavaScript خالصة. هذا سيظهر أنك تعرف كيفية التعامل مع أحداث DOM، وLocalStorage، وعدم التزامن.

ما يجب أن يكون بداخله

\n
• ثلاثة أعمدة: "مخطط له"، "قيد التنفيذ"، "مكتمل".
\n
• سحب وإفلات البطاقات مع حفظ الموضع في LocalStorage.
\n
• تصفية حسب العلامات (عمل/شخصي/عاجل).
\n
• الوضع الداكن (يظهر الاهتمام بتجربة المستخدم).
\n

مثال على تنفيذ السحب والإفلات بلغة JS خالصة

const draggables = document.querySelectorAll('.task');\nconst containers = document.querySelectorAll('.column');\n\ndraggables.forEach(task => {\n    task.addEventListener('dragstart', () => {\n        task.classList.add('dragging');\n    });\n\n    task.addEventListener('dragend', () => {\n        task.classList.remove('dragging');\n        saveToLocalStorage(); // دالة حفظ مخصصة\n    });\n});\n\ncontainers.forEach(column => {\n    column.addEventListener('dragover', e => {\n        e.preventDefault();\n        const afterElement = getDragAfterElement(column, e.clientY);\n        const draggable = document.querySelector('.dragging');\n        if (afterElement == null) {\n            column.appendChild(draggable);\n        } else {\n            column.insertBefore(draggable, afterElement);\n        }\n    });\n});\n\nfunction getDragAfterElement(container, y) {\n    const draggableElements = [...container.querySelectorAll('.task:not(.dragging)')];\n    return draggableElements.reduce((closest, child) => {\n        const box = child.getBoundingClientRect();\n        const offset = y - box.top - box.height / 2;\n        if (offset < 0 && offset > closest.offset) {\n            return { offset: offset, element: child };\n        } else {\n            return closest;\n        }\n    }, { offset: Number.NEGATIVE_INFINITY }).element;\n}\n

لماذا هذا رائع: تظهر فهمك لنموذج أحداث المتصفح، والعمل مع الإحداثيات، وتحسين الأداء (ليست هناك حاجة لـ debounce ولكن يمكن ذكرها في readme).

2. تطبيق الطقس مع تحديد الموقع والرسوم المتحركة

طلبات API هي أساس الواجهة الأمامية الحديثة. مشروع بلغة JavaScript باستخدام fetch و async/await ومعالجة الأخطاء هو عنصر إلزامي في محفظة الأعمال. أضف تصورًا: غيوم متحركة، أو مطر، أو ثلج باستخدام CSS/Canvas.

الميزات الرئيسية

\n
• تحديد الموقع عبر Geolocation API.
\n
• البحث عن المدن مع اقتراحات (debounce على الإدخال).
\n
• عرض درجة الحرارة، الرطوبة، الرياح وأيقونة الطقس.
\n
• رسم بياني لدرجة الحرارة لمدة 5 أيام (Chart.js أو SVG مخصص).
\n

مثال على طلب إلى OpenWeatherMap

async function getWeather(city) {\n    const API_KEY = 'مفتاحك';\n    const url = `https://api.openweatherm