Mini Project: Todo List Logic

ဒီ Course မှာ သင်ယူခဲ့တဲ့ TypeScript အခြေခံတွေ (Types, Interfaces, Functions, Arrays) ကို ပေါင်းစပ်ပြီး Todo List တစ်ခုရဲ့ နောက်ကွယ်က အလုပ်လုပ်ပုံ (Logic) ကို ရေးကြည့်ရအောင်။

ဒီ Project မှာ အောက်ပါ လုပ်ဆောင်ချက်တွေ ပါဝင်ပါမယ်။

1. Todo အသစ် ထည့်ခြင်း (Add Todo)
2. Todo ပြီးစီးကြောင်း မှတ်သားခြင်း (Toggle Todo)
3. Todo များကို ကြည့်ရှုခြင်း (View Todos)
4. ပြီးစီးသွားသော Todo များကို ဖျက်ခြင်း (Clear Completed)

---

အဆင့် (၁): Todo Interface ဖန်တီးခြင်း

အရင်ဆုံး Todo တစ်ခုမှာ ဘာအချက်အလက်တွေ ပါရမလဲ ဆိုတာကို interface သုံးပြီး သတ်မှတ်ပါမယ်။

// Todo တစ်ခုရဲ့ ပုံစံကြမ်း
interface Todo {
    id: number;
    task: string;
    isCompleted: boolean;
}

// Todo တွေကို သိမ်းထားမယ့် Array
let todos: Todo[] = [];
let nextId: number = 1; // နောက်ထပ် ဝင်လာမယ့် Todo အတွက် ID

---

အဆင့် (၂): လုပ်ဆောင်ချက်များ (Functions) ရေးသားခြင်း

1. Todo အသစ် ထည့်ခြင်း

function addTodo(taskName: string): void {
    // Todo အသစ်တစ်ခု ဖန်တီးခြင်း
    const newTodo: Todo = {
        id: nextId,
        task: taskName,
        isCompleted: false // စထည့်ချင်းမှာ မပြီးသေးဘူးလို့ သတ်မှတ်ပါတယ်
    };

    todos.push(newTodo);
    nextId++; // နောက်တစ်ခုအတွက် ID ကို တိုးပေးပါတယ်

    console.log(`✅ ထည့်သွင်းပြီး: "${taskName}"`);
}

2. Todo ပြီးစီးကြောင်း မှတ်သားခြင်း

function toggleTodo(id: number): void {
    // ပေးလိုက်တဲ့ ID နဲ့ ကိုက်ညီတဲ့ Todo ကို ရှာခြင်း
    const todo = todos.find(t => t.id === id);

    if (todo) {
        // isCompleted ကို ပြောင်းပြန်လှန်လိုက်ပါတယ် (true ဆို false, false ဆို true)
        todo.isCompleted = !todo.isCompleted;

        const status = todo.isCompleted ? "ပြီးစီး" : "မပြီးသေး";
        console.log(`🔄 ပြောင်းလဲပြီး: "${todo.task}" သည် [${status}] ဖြစ်သွားပါပြီ။`);
    } else {
        console.log(`❌ အမှား: ID ${id} ဖြင့် Todo မတွေ့ပါ။`);
    }
}

3. Todo များကို ကြည့်ရှုခြင်း

function viewTodos(): void {
    console.log("\n--- သင့်ရဲ့ Todo စာရင်း ---");

    if (todos.length === 0) {
        console.log("မှတ်သားထားတာ ဘာမှ မရှိသေးပါ။");
        return;
    }

    todos.forEach(todo => {
        // ပြီးသွားရင် [X] ပြပြီး၊ မပြီးသေးရင် [ ] ပြပါမယ်
        const checkbox = todo.isCompleted ? "[X]" : "[ ]";
        console.log(`${todo.id}. ${checkbox} ${todo.task}`);
    });
    console.log("-------------------------\n");
}

4. ပြီးစီးသွားသော Todo များကို ဖျက်ခြင်း

function clearCompleted(): void {
    // isCompleted က false ဖြစ်နေတဲ့ (မပြီးသေးတဲ့) ဟာတွေကိုပဲ စစ်ထုတ်ပြီး ပြန်သိမ်းပါတယ်
    todos = todos.filter(todo => !todo.isCompleted);
    console.log("🗑️ ပြီးစီးသွားသော အလုပ်များကို ဖျက်လိုက်ပါပြီ။");
}

---

အဆင့် (၃): စမ်းသပ် အသုံးပြုကြည့်ခြင်း

အခု ရေးထားတဲ့ Function တွေကို ခေါ်သုံးကြည့်ရအောင်။

// ၁. အလုပ်တွေ ထည့်မယ်
addTodo("TypeScript လေ့လာရန်");
addTodo("React Project ရေးရန်");
addTodo("ဈေးဝယ်ရန်");

// ၂. စာရင်းကို ကြည့်မယ်
viewTodos();
/*
--- သင့်ရဲ့ Todo စာရင်း ---
1. [ ] TypeScript လေ့လာရန်
2. [ ] React Project ရေးရန်
3. [ ] ဈေးဝယ်ရန်
-------------------------
*/

// ၃. အလုပ်တချို့ ပြီးသွားပြီလို့ မှတ်မယ်
toggleTodo(1); // TypeScript လေ့လာရန် ပြီးသွားပြီ
toggleTodo(3); // ဈေးဝယ်ရန် ပြီးသွားပြီ

// ၄. စာရင်းကို ပြန်ကြည့်မယ်
viewTodos();
/*
--- သင့်ရဲ့ Todo စာရင်း ---
1. [X] TypeScript လေ့လာရန်
2. [ ] React Project ရေးရန်
3. [X] ဈေးဝယ်ရန်
-------------------------
*/

// ၅. ပြီးသွားတာတွေ ဖျက်မယ်
clearCompleted();

// ၆. နောက်ဆုံး အခြေအနေကို ကြည့်မယ်
viewTodos();
/*
--- သင့်ရဲ့ Todo စာရင်း ---
2. [ ] React Project ရေးရန်
-------------------------
*/

နိဂုံးချုပ်

ဂုဏ်ယူပါတယ်။ သင်ဟာ TypeScript ရဲ့ အခြေခံတွေကို နားလည်သွားရုံသာမက၊ အဲ့ဒီ အခြေခံတွေကို ပေါင်းစပ်ပြီး အသုံးဝင်တဲ့ Logic တစ်ခုကိုပါ ကိုယ်တိုင် ရေးသားနိုင်သွားပါပြီ။

ဒီ Logic တွေကို React လို Frontend Framework တွေနဲ့ တွဲသုံးလိုက်ရင် တကယ့် အသုံးဝင်တဲ့ Web Application တစ်ခု ဖြစ်လာပါလိမ့်မယ်။ TypeScript လောကထဲကို ဝင်ရောက်လာတဲ့အတွက် ကြိုဆိုပါတယ်။ ဆက်လက် လေ့လာသွားဖို့ တိုက်တွန်းပါတယ်။