Project 1: Interactive Counter

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

1.. 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>

2. JavaScript ရေးသားခြင်း

1. Select Elements: လိုအပ်တဲ့ Element တွေကို အရင် ဖမ်းပါ။ (h1, button ၃ ခု)
2. State Variable: လက်ရှိ number တန်ဖိုးကို သိမ်းထားဖို့ Variable တစ်ခု လိုပါမယ်။ (let count = 0;)
3. Event Listeners: ခလုတ် ၁ ခုချင်းစီအတွက် event listener တွေရေးပါ။
   • + နှိပ်ရင် count ကို ၁ တိုး၊ ပြီးရင် h1 မှာ ပြန်ပြ။
   • - နှိပ်ရင် count ကို ၁ လျော့၊ h1 မှာ ပြန်ပြ။
   • Reset နှိပ်ရင် count ကို ၀ လုပ်၊ h1 မှာ ပြန်ပြ။

// 1. Select Elements
const value = document.querySelector("#count");

let count = 0;

const increaseBtn = document.querySelector("#increase-btn");
// ... select other buttons

increaseBtn.addEventListener("click", function() {
    count++;
    value.textContent = count;

    // အရောင်လေးပါ ပြောင်းကြည့်ရအောင်
    if (count > 0) {
        value.style.color = "green";
    }
});

👉 မေးခွန်း: Decrease နဲ့ Reset အတွက် ကိုယ့်ဘာသာ ဆက်ရေးကြည့်ပါ။