Project 2: To-Do List

ဒါကတော့ JavaScript စတင် လေ့လာသူတိုင်း မဖြစ်မနေ ရေးကြည့်ရမယ့်၊ DOM Manipulation ကို အကောင်းဆုံး နားလည်သွားစေမယ့် နာမည်ကြီး Project တစ်ခုပဲ ဖြစ်ပါတယ်။

လိုအပ်ချက်များ (Requirements)

၁။ Input Box ထဲမှာ စာရိုက်ပြီး “Add” ခလုတ် နှိပ်လိုက်ရင်၊ အဲ့ဒီစာက အောက်က List (စာရင်း) ထဲကို ဝင်ရောက် သွားရပါမယ်။ ၂။ ပြီးမြောက်သွားတဲ့ Task (အလုပ်) တွေကို Mouse နဲ့ Click တစ်ချက် နှိပ်လိုက်တာနဲ့ မျဉ်းသား (Line-through) သွားရပါမယ်။ ၃။ Double Click (နှစ်ချက် ဆက်တိုက်) နှိပ်လိုက်ရင်တော့ အဲ့ဒီ Task ဟာ စာရင်းထဲကနေ အပြီးတိုင် ပျက်သွားရပါမယ်။

၁။ HTML Structure (ဖွဲ့စည်းပုံ)

<input type="text" id="todo-input" placeholder="Add a new task...">
<button id="add-btn">Add</button>

<ul id="todo-list">
    <!-- User က အသစ်ထည့်လိုက်သော Task (<li>) များသည် ဤနေရာတွင် ဝင်လာမည် ဖြစ်သည် -->
</ul>

ကြိုတင် သိထားသင့်သော အချက်: createElement

ဒီ Project ရဲ့ ထူးခြားချက်ကတော့ HTML ထဲမှာ <li> တွေကို ကြိုတင် ရေးသားထားမှာ မဟုတ်ပါဘူး။ User က “Add” ဆိုတဲ့ ခလုတ်ကို နှိပ်လိုက်တဲ့ အချိန်ရောက်မှသာ JavaScript ကို အသုံးပြုပြီး Element အသစ်တွေကို ချက်ချင်း ဖန်တီး (Create) မှာ ဖြစ်ပါတယ်။ အဲ့ဒီအတွက် document.createElement("TAG_NAME") ဆိုတဲ့ Method ကို အသုံးပြုရပါတယ်။

ဥပမာအားဖြင့်:

const li = document.createElement("li"); // <li></li> အသစ်တစ်ခုကို ဖန်တီးလိုက်တာပါ
// သတိပြုရန် - ယခုအချိန်ထိ ဖန်တီးရုံ သက်သက်သာ ရှိသေးပြီး မျက်နှာပြင်ပေါ်မှာ မပေါ်သေးပါဘူး။
// appendChild ကို အသုံးပြုပြီး သက်ဆိုင်ရာ နေရာကို သွားထည့်ပေးမှသာ (Attach လုပ်မှသာ) မြင်ရမှာ ဖြစ်ပါတယ်။

၂။ JavaScript Logic (အသက်သွင်းခြင်း)

const input = document.getElementById("todo-input");
const addBtn = document.getElementById("add-btn");
const todoList = document.getElementById("todo-list");

addBtn.addEventListener("click", function() {
    // ၁။ Input Box ထဲမှာ User ရိုက်ထည့်လိုက်တဲ့ စာသားကို ယူပါမယ်
    const taskText = input.value;

    if (taskText === "") return; // အကယ်၍ ဘာမှ မရေးထားဘဲ Add ကို နှိပ်ခဲ့ရင် ဘာမှ ဆက်မလုပ်ဘဲ ရပ်တန့် (return) ပါမယ်

    // ၂။ စာရင်း အသစ်အတွက် List Item (<li>) အသစ်တစ်ခု တည်ဆောက်ပါမယ်
    const li = document.createElement("li");
    li.textContent = taskText; // <li> ရဲ့ စာသားနေရာမှာ User ရိုက်ထည့်လိုက်တဲ့ စာကို သွားထည့်လိုက်တာပါ

    // ၃။ Task ကို ပြီးစီးကြောင်း မှတ်သားရန် (Click တစ်ချက်နှိပ်လျှင်)
    li.addEventListener("click", function() {
        li.classList.toggle("completed");
        // ဤလုပ်ဆောင်ချက် အလုပ်လုပ်ရန် CSS တွင် .completed { text-decoration: line-through } ဟု ရေးထားရန် လိုအပ်ပါသည်
    });

    // ၄။ Task ကို ဖျက်ပစ်ရန် (Double Click နှစ်ချက်နှိပ်လျှင်)
    li.addEventListener("dblclick", function() {
        todoList.removeChild(li); // <ul> ထဲကနေ ၎င်း <li> ကို ဖယ်ရှားလိုက်တာပါ
    });

    // ၅။ အစစအရာရာ ပြင်ဆင်ပြီးသွားသော <li> အသစ်လေးကို အပြင်က <ul> ကြီးထဲသို့ အတည်ပြု ထည့်သွင်း (Append) ပါမယ်
    todoList.appendChild(li);

    // ၆။ နောက်ထပ် စာတွေ ထပ်ရိုက်လို့ ရအောင် Input box ထဲက ဟာတွေကို ပြန်ရှင်းထုတ် (Clear) ပါမယ်
    input.value = "";
});

CSS အနည်းငယ် (ထပ်ဖြည့်ရန်)

အထက်ပါ JavaScript ကို အပြည့်အဝ အလုပ်လုပ်စေရန် အောက်ပါ CSS လေးကိုပါ သင့်ရဲ့ CSS ဖိုင်ထဲမှာ ထည့်သွင်းပေးပါ။

/* ပြီးစီးသွားသော Task များအတွက် ဒီဇိုင်း */
.completed {
    text-decoration: line-through;
    color: gray;
}