Project 1: Interactive Counter

သင်ခန်းစာတွေ အများကြီး လေ့လာပြီးပြီဆိုတော့ အခု လက်တွေ့ Project သေးသေးလေး တစ်ခု စပြီး ရေးကြည့်ကြရအောင်။ ဒီ Project ကတော့ “အပေါင်း” ခလုတ်နှိပ်ရင် ဂဏန်းတိုးမယ်၊ “အနှုတ်” ခလုတ်နှိပ်ရင် ဂဏန်းလျော့မယ်၊ “Reset” နှိပ်ရင် သုည (0) ပြန်ဖြစ်သွားမယ့် ရိုးရှင်းတဲ့ ရေတွက်စက်လေး တစ်ခု ဖြစ်ပါတယ်။

၁။ HTML တည်ဆောက်ခြင်း

အရင်ဆုံး အမြင်ပိုင်းအတွက် လိုအပ်တဲ့ HTML ကို အောက်ပါအတိုင်း တည်ဆောက်လိုက်ပါမယ်။

<div class="counter-container">
    <!-- ဂဏန်းပြမည့်နေရာ -->
    <h1 id="count">0</h1>
    <!-- အနှုတ် ခလုတ် -->
    <button id="decrease-btn">-</button>
    <!-- အစက ပြန်စမည့် ခလုတ် -->
    <button id="reset-btn">Reset</button>
    <!-- အပေါင်း ခလုတ် -->
    <button id="increase-btn">+</button>
</div>

၂။ JavaScript ရေးသားခြင်း

အခု အဲ့ဒီ HTML ကြီး အသက်ဝင်လာအောင် JavaScript နဲ့ အောက်ပါအတိုင်း အဆင့်ဆင့် ရေးသားပါမယ်။

၁။ Select Elements: မိမိ အသုံးပြုမယ့် (နှိပ်မယ့်၊ စာသားပြောင်းမယ့်) Element တွေကို အရင်ဆုံး လှမ်းဖမ်း (Select) ပါမယ်။ (ဒီမှာ h1 ၁ ခုနဲ့ button ၃ ခု လိုအပ်ပါမယ်) ၂။ State Variable: လက်ရှိ ရောက်နေတဲ့ ဂဏန်းတန်ဖိုး (Number Value) ကို မှတ်သားထားဖို့ Variable တစ်ခု လိုအပ်ပါမယ်။ (ဥပမာ - let count = 0;) ၃။ Event Listeners: ခလုတ် တစ်ခုချင်းစီကို နှိပ်တဲ့အခါ ဘာလုပ်မလဲ ဆိုတာကို Event Listener တွေ သုံးပြီး ရေးသားပါမယ်။

• + ခလုတ်ကို နှိပ်ရင် count တန်ဖိုးကို (၁) တိုးမယ်၊ ပြီးရင် အဲ့ဒီတန်ဖိုး အသစ်ကို h1 မှာ ပြန်ပြမယ်။
• - ခလုတ်ကို နှိပ်ရင် count တန်ဖိုးကို (၁) လျှော့မယ်၊ ပြီးရင် h1 မှာ ပြန်ပြမယ်။
• Reset ခလုတ်ကို နှိပ်ရင် count တန်ဖိုးကို (၀) အဖြစ် ပြန်သတ်မှတ်မယ်၊ ပြီးရင် h1 မှာ ပြန်ပြမယ်။

// ၁။ Select Elements (Element များကို ဖမ်းယူခြင်း)
const value = document.querySelector("#count");
const increaseBtn = document.querySelector("#increase-btn");
// (အနှုတ် ခလုတ်နှင့် Reset ခလုတ်တို့ကိုလည်း ဤနေရာတွင် ဆက်လက် ဖမ်းယူပါ...)

// ၂။ State Variable (လက်ရှိတန်ဖိုးကို သိမ်းဆည်းရန်)
let count = 0;

// ၃။ Event Listeners (ခလုတ်နှိပ်သည့် အလုပ်များ လုပ်ဆောင်ရန်)
increaseBtn.addEventListener("click", function() {
    count++; // count = count + 1 လို့ ရေးတာနဲ့ အတူတူပါပဲ
    value.textContent = count; // ပြောင်းလဲသွားသော ဂဏန်းကို မျက်နှာပြင်ပေါ်တွင် ပြန်ပြမည်

    // အရောင်လေးပါ ပြောင်းကြည့်ရအောင် (အလှဆင်ခြင်း)
    if (count > 0) {
        value.style.color = "green"; // ဂဏန်းက သုညထက် ကြီးရင် အစိမ်းရောင် ပြမည်
    } else if (count === 0) {
        value.style.color = "black";
    }
});

👉 မေးခွန်း (သင်ကိုယ်တိုင် လုပ်ဆောင်ရန်): Decrease (အနှုတ်) ခလုတ်နဲ့ Reset (သုည ပြန်ထားခြင်း) ခလုတ်တွေ အတွက် Event Listener Code တွေကို ကိုယ့်ဘာသာ အထက်ပါ ပုံစံအတိုင်း ဆက်လက် ရေးသားကြည့်ပါ။