مشروع: تطبيق Todo كامل - أساسيات جافاسكربت

مشروع نهائي: تطبيق Todo متقدم 📱

سنبني تطبيق إدارة مهام كامل باستخدام Classes و localStorage و DOM.

محرر الكود

// مشروع Todo Manager كامل
class TodoApp {
  constructor() {
    this.todos = [];
    this.nextId = 1;
  }

add(text, priority = "عادي") {
    const todo = {
      id: this.nextId++,
      text,
      priority,
      done: false,
      created: new Date().toLocaleDateString("ar")
    };
    this.todos.push(todo);
    console.log(`✅ أُضيف: ${text}`);
    return todo;
  }

toggle(id) {
    const todo = this.todos.find(t => t.id === id);
    if (todo) {
      todo.done = !todo.done;
      console.log(`${todo.done ? "✅" : "⬜"} ${todo.text}`);
    }
  }

remove(id) {
    this.todos = this.todos.filter(t => t.id !== id);
    console.log("🗑️ تم الحذف");
  }

filter(status) {
    if (status === "done") return this.todos.filter(t => t.done);
    if (status === "pending") return this.todos.filter(t => !t.done);
    return this.todos;
  }

stats() {
    const total = this.todos.length;
    const done = this.todos.filter(t => t.done).length;
    return { total, done, pending: total - done };
  }

display() {
    console.log("\n=== قائمة المهام ===");
    if (!this.todos.length) { console.log("  📭 فارغة"); return; }
    this.todos.forEach(t => {
      const icon = t.done ? "✅" : "⬜";
      console.log(`  ${icon} [${t.id}] ${t.text} (${t.priority})`);
    });
    const s = this.stats();
    console.log(`\n  📊 الكل: ${s.total} | مكتمل: ${s.done} | متبقي: ${s.pending}`);
  }
}

const app = new TodoApp();
app.add("تعلم JavaScript", "عالي");
app.add("بناء مشروع React", "عالي");
app.add("قراءة كتاب", "عادي");
app.add("رياضة", "منخفض");
app.toggle(1);
app.toggle(3);
app.display();

المخرجات

// اضغط ▶ تشغيل لرؤية النتائج...

تمرين

أضف ميزة البحث والترتيب حسب الأولوية والتاريخ.

⚡ مشروع: تطبيق Todo كامل

مشروع نهائي: تطبيق Todo متقدم 📱

تمرين