مشروع الطالب | قائمة المهام التفاعلية

وجدي زايد السيد

قائمة مهام تفاعلية قائمة مهام

عنوان المشروع البرمجي:

قائمة المهام التفاعلية (To-Do List)

فكرة المشروع

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

SOURCE CODE


<!-- قائمة المهام التفاعلية - إعدادوجدي زايد السيد -->
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>قائمة المهام - To-Do List</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Tajawal', 'Cairo', sans-serif;
            background: linear-gradient(135deg, #0B3526 0%, #1a4d3a 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }
        
        .todo-container {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 30px;
            padding: 35px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.3);
            max-width: 550px;
            width: 100%;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,215,0,0.3);
        }
        
        h1 {
            text-align: center;
            color: #0B3526;
            margin-bottom: 25px;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }
        
        .input-section {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
        }
        
        #taskInput {
            flex: 1;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 15px;
            font-size: 16px;
            font-family: inherit;
            transition: all 0.3s ease;
        }
        
        #taskInput:focus {
            outline: none;
            border-color: #D4AF37;
            box-shadow: 0 0 0 3px rgba(212,175,55,0.2);
        }
        
        #addBtn {
            background: linear-gradient(135deg, #0B3526, #1a4d3a);
            color: white;
            border: none;
            padding: 0 25px;
            border-radius: 15px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        #addBtn:hover {
            transform: scale(1.02);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .filters {
            display: flex;
            gap: 10px;
            margin-bottom: 25px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .filter-btn {
            background: #f0f0f0;
            border: none;
            padding: 10px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-family: inherit;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        .filter-btn.active {
            background: linear-gradient(135deg, #D4AF37, #eab308);
            color: #0B3526;
        }
        
        .task-list {
            list-style: none;
            max-height: 350px;
            overflow-y: auto;
        }
        
        .task-item {
            display: flex;
            align-items: center;
            padding: 15px;
            background: #f8f9fa;
            margin-bottom: 10px;
            border-radius: 15px;
            transition: all 0.3s ease;
            border: 1px solid #e0e0e0;
        }
        
        .task-item:hover {
            transform: translateX(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .task-checkbox {
            margin-left: 15px;
            width: 22px;
            height: 22px;
            cursor: pointer;
        }
        
        .task-text {
            flex: 1;
            font-size: 16px;
            color: #333;
        }
        
        .task-text.completed {
            text-decoration: line-through;
            color: #999;
        }
        
        .delete-btn {
            background: #ff4757;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .delete-btn:hover {
            transform: scale(1.05);
            background: #ff6b81;
        }
        
        .stats {
            text-align: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 2px solid #e0e0e0;
            color: #666;
            font-weight: bold;
        }
        
        @media (max-width: 600px) {
            .todo-container { padding: 20px; }
            .task-text { font-size: 14px; }
            .delete-btn { padding: 5px 10px; }
        }
    </style>
</head>
<body>
    <div class="todo-container">
        <h1>
            <span>✅</span>
            قائمة المهام
            <span>📋</span>
        </h1>
        
        <div class="input-section">
            <input type="text" id="taskInput" placeholder="أدخل مهمة جديدة..." onkeypress="if(event.key==='Enter') addTask()">
            <button id="addBtn" onclick="addTask()">➕ إضافة</button>
        </div>
        
        <div class="filters">
            <button class="filter-btn active" onclick="filterTasks('all')">الكل</button>
            <button class="filter-btn" onclick="filterTasks('active')">غير مكتملة</button>
            <button class="filter-btn" onclick="filterTasks('completed')">مكتملة</button>
        </div>
        
        <ul class="task-list" id="taskList"></ul>
        
        <div class="stats" id="stats"></div>
    </div>

    <script>
        let tasks = [];
        let currentFilter = 'all';
        
        function loadTasks() {
            const saved = localStorage.getItem('todoTasks');
            if (saved) {
                tasks = JSON.parse(saved);
            }
            renderTasks();
        }
        
        function saveTasks() {
            localStorage.setItem('todoTasks', JSON.stringify(tasks));
        }
        
        function addTask() {
            const input = document.getElementById('taskInput');
            const text = input.value.trim();
            if (text === '') {
                alert('⚠️ الرجاء إدخال مهمة');
                return;
            }
            
            tasks.push({
                id: Date.now(),
                text: text,
                completed: false,
                createdAt: new Date().toLocaleString()
            });
            
            input.value = '';
            saveTasks();
            renderTasks();
        }
        
        function toggleTask(id) {
            const task = tasks.find(t => t.id === id);
            if (task) {
                task.completed = !task.completed;
                saveTasks();
                renderTasks();
            }
        }
        
        function deleteTask(id) {
            if (confirm('🗑️ هل أنت متأكد من حذف هذه المهمة؟')) {
                tasks = tasks.filter(t => t.id !== id);
                saveTasks();
                renderTasks();
            }
        }
        
        function filterTasks(filter) {
            currentFilter = filter;
            document.querySelectorAll('.filter-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            event.target.classList.add('active');
            renderTasks();
        }
        
        function renderTasks() {
            let filteredTasks = tasks;
            if (currentFilter === 'active') {
                filteredTasks = tasks.filter(t => !t.completed);
            } else if (currentFilter === 'completed') {
                filteredTasks = tasks.filter(t => t.completed);
            }
            
            const taskList = document.getElementById('taskList');
            taskList.innerHTML = '';
            
            if (filteredTasks.length === 0) {
                taskList.innerHTML = '<div style="text-align:center; padding:40px; color:#999;">📭 لا توجد مهام لعرضها</div>';
                return;
            }
            
            filteredTasks.forEach(task => {
                const li = document.createElement('li');
                li.className = 'task-item';
                li.innerHTML = `
                    <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''} onchange="toggleTask(${task.id})">
                    <span class="task-text ${task.completed ? 'completed' : ''}">${escapeHtml(task.text)}</span>
                    <button class="delete-btn" onclick="deleteTask(${task.id})">🗑️ حذف</button>
                `;
                taskList.appendChild(li);
            });
            
            const completedCount = tasks.filter(t => t.completed).length;
            const activeCount = tasks.length - completedCount;
            document.getElementById('stats').innerHTML = `📊 المجموع: ${tasks.length} | ✅ مكتملة: ${completedCount} | ⏳ جارية: ${activeCount}`;
        }
        
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }
        
        loadTasks();
    </script>
</body>
</html>

نتيجة التنفيذ

اضغط على "تشغيل المشروع" لرؤية النتيجة

قائمة مهام تفاعلية - حفظ تلقائي وتصنيف

تم التنفيذ والمراجعة تحت إشراف معلم أول المادة:

المهندس/ محمد محمود شاهين

مدرسة الشهيد أحمد مالك الثانوية

إدارة قلين التعليمية

to do

وجدي زايد السيد

قائمة المهام التفاعلية (To-Do List)

فكرة المشروع