Task Management System for Teams"

مشروع عبارة عن تطبيق ويب يسمح للفرق بإدارة المهام بشكل فعال. يوفر واجهة لتسجيل المهام، تعيينها للأفراد، تعقب حالة المهام (Pending, In Progress, Completed)، وعرض لوحة تحكم تفاعلية

تسجيل مهام جديدة: كل مستخدم يمكنه إضافة مهام للفريق.

تحديث حالة المهام: تغيير حالة المهمة إلى "جارٍ التنفيذ" أو "مكتملة".

لوحة إدارة المهام: عرض مرئي للمهام باستخدام Kanban Board.

واجهة متجاوبة: تصميم يناسب جميع الأجهزة.

البرنامج الذي قدمته هو نظام إدارة مهام بسيط باستخدام HTML وCSS وJavaScript. يتيح لك إضافة مهام جديدة، تنظيمها، وتحريكها عبر ثلاث حالات: "To Do" (المهام التي لم تُنجز بعد)، "In Progress" (المهام قيد التنفيذ)، و "Completed" (المهام المنجزة). دعني أشرح لك كل جزء من الكود بالتفصيل:

1. الهيكل الأساسي (HTML):

يتكون البرنامج من عدة أقسام أساسية:

1.1. الـ <header>:

<header>

<h1>Task Management System</h1>

</header>

يحتوي على عنوان رئيسي (heading) للموقع "Task Management System".

1.2. نموذج إضافة المهام (Form):

<form class="add-task-form">

<input type="text" placeholder="Task Title" id="task-title" required>

<textarea placeholder="Task Description" id="task-desc"></textarea>

<button type="button" onclick="addTask()">Add Task</button>

</form>

<input>: حقل لإدخال عنوان المهمة.

<textarea>: حقل لوصف المهمة.

<button>: زر لإضافة المهمة. عند الضغط عليه، يتم استدعاء الدالة addTask() لإضافة المهمة إلى اللوحة.

1.3. لوحة المهام (Task Board):

<div class="task-board">

<div class="column" id="todo">

<h3>To Do</h3>

</div>

<div class="column" id="in-progress">

<h3>In Progress</h3>

</div>

<div class="column" id="completed">

<h3>Completed</h3>

</div>

</div>

يتم تقسيم لوحة المهام إلى ثلاث أعمدة:

To Do: للمهمات التي لم تُنجز بعد.

In Progress: للمهمات قيد التنفيذ.

Completed: للمهمات التي تم إنجازها.

2. التنسيق (CSS):

يتم استخدام CSS لتنسيق الصفحة وتحديد الشكل العام للمحتوى:

body: يحدد الخط العام والخلفية للصفحة.

header: تصميم الشريط العلوي مع الخلفية الداكنة والنص الأبيض.

main: تحديد المساحة داخل الصفحة.

.task-board: تنظيم الأعمدة بحيث تكون مرنة وموزعة بشكل أفقي.

.column: تحديد تصميم الأعمدة (خلفية بيضاء، تباعد، ظل خفيف).

.task: تصميم كل مهمة داخل الأعمدة مع إضافة تباعد وحواف مدورة.

3. وظائف JavaScript:

إضافة مهمة جديدة:

function addTask() {

const title = document.getElementById('task-title').value;

const desc = document.getElementById('task-desc').value;

if (title) {

const task = document.createElement('div');

task.className = 'task';

task.innerHTML = `<h4>${title}</h4><p>${desc}</p><button onclick="moveTask(this, 'in-progress')">Start</button>`;

document.getElementById('todo').appendChild(task);

document.getElementById('task-title').value = '';

document.getElementById('task-desc').value = '';

}

}

هذه الدالة تُنفّذ عند الضغط على زر "Add Task".

تقوم أولاً بالحصول على القيم المدخلة في حقل العنوان والوصف.

إذا كان العنوان غير فارغ، يتم إنشاء مهمة جديدة (<div>).

يتم إضافة العنوان والوصف للمهمة، بالإضافة إلى زر يبدأ تنقل المهمة إلى العمود التالي "In Progress" عند الضغط عليه.

بعد إضافة المهمة، يتم مسح الحقول لتكون جاهزة لإضافة مهمة جديدة.

نقل المهمة بين الأعمدة:

function moveTask(button, columnId) {

const task = button.parentElement;

task.querySelector('button').textContent = columnId === 'completed' ? 'Done' : 'Complete';

task.querySelector('button').setAttribute('onclick', `moveTask(this, '${columnId === 'completed' ? 'todo' : 'completed'}')`);

document.getElementById(columnId).appendChild(task);

}

تقوم هذه الدالة بنقل المهمة من عمود إلى آخر.

عندما يتم الضغط على زر المهمة، يتم تغيير النص داخل الزر (إذا كانت المهمة في "In Progress"، يُصبح الزر "Complete"، وإذا كانت في "Completed"، يُصبح الزر "Done").

كما يتم تحديث دالة onclick في الزر لتغيير العمود الذي ستنتقل إليه المهمة عند الضغط عليه (من "To Do" إلى "In Progress" أو العكس).

يتم نقل المهمة فعلياً إلى العمود المحدد (بواسطة document.getElementById(columnId).appendChild(task)).

4. التفاعل بين المستخدم والواجهة:

المستخدم يكتب العنوان والوصف في النموذج.

عند الضغط على زر "Add Task"، تتم إضافة المهمة إلى عمود "To Do".

يمكن للمستخدم تغيير حالة المهمة بالنقر على الزر المرتبط بكل مهمة، مما ينقلها إلى العمود التالي (من "To Do" إلى "In Progress" ثم إلى "Completed").

خلاصة:

البرنامج هو مثال بسيط على إدارة المهام في بيئة الفريق، حيث يسمح بإضافة المهام وتنسيقها عبر حالات مختلفة (مهمات غير مكتملة، قيد التنفيذ، ومنجزة). يتيح لك التنقل بين هذه الحالات عبر واجهة تفاعلية وسهلة الاستخدام.

هل ترغب في إضافة ميزات أخرى أو التعديل على هذا النظام؟