JavaScript ဖြင့် စစ်ဆေးရန်စာရင်း

ဤသင်ခန်းစာတွင် စစ်ဆေးရန်စာရင်းကို အကောင်အထည်ဖော်ပါမည်။ စစ်ဆေးရန်စာရင်းဆိုသည်မှာ လုပ်စရာကိစ္စများ၏ စာရင်းကို ပြုလုပ်နိုင်ပြီး ထိုကိစ္စများ ပြီးဆုံးသည့်အခါ ပြီးပြီဟု အမှတ်အသားပြုနိုင်သော ပရိုဂရမ်တစ်ခုကို ခေါ်ပါသည်။

ကိစ္စများကို ပေါင်းထည့်ခြင်း၊ ဖျက်ခြင်း၊ တည်းဖြတ်ခြင်းနှင့် ပြီးဆုံးပြီဟု အမှတ်အသားပြုခြင်းတို့ကို ပြုလုပ်နိုင်အောင် လုပ်ကြပါစို့။

ကျွန်ုပ်တို့ရရှိရမည့်အရာ၏ နမူနာပုံစံဖြစ်ပါသည် (ကိစ္စအသစ်တစ်ခုထည့်ရန် အိုင်းန်ပွတ်ထဲတွင် စာသားထည့်ပြီး Enter ကိုနှိပ်ပါ၊ တည်းဖြတ်ရန် ကိစ္စ၏စာသားကို ဒဗကလစ်နှိပ်ပါ):

စတင်ကြပါစို့

ထို့ကြောင့် ဖော်ပြထားသော အလုပ်ကို အကောင်အထည်ဖော်ရန် စတင်ကြပါစို့။

အစပိုင်းအနေဖြင့် ကျွန်ုပ်တို့၏ စစ်ဆေးရန်စာရင်းအတွက် HTML ကုဒ်ကို ရေးပါမည်။ အလုပ်အသစ်များကို အိုင်းန်ပွတ်ကို အသုံးပြု၍ ထည့်သွင်းပြီး ul စာရင်းထဲသို့ ပေါင်းထည့်ပါစို့:

<input id="input">
<ul id="list"></ul>

ကျွန်ုပ်တို့၏ စစ်ဆေးရန်စာရင်းအား အလှဆင်ပေးမည့် CSS ကုဒ်အချို့ကို ချက်ချင်းပေါင်းထည့်ပါမည်:

body {
	text-align: center;
}
#input, #list {
	display: inline-block;
}
#list {
	padding: 0;
	list-style-type: none;
}

ပုံမှန်အတိုင်း ရှုပ်ထွေးသောအလုပ်ကို ရိုးရှင်းသောအဆင့်များအဖြစ် ခွဲခြားပါမည်။

ပထမအဆင့်အနေဖြင့် အိုင်းန်ပွတ်ထဲတွင် စာသားထည့်နိုင်ပြီး Enter ကိုနှိပ်လိုက်သည့်အခါ ul ၏အဆုံးတွင် ထည့်သွင်းထားသောစာသားဖြင့် li တစ်ခု ပေါင်းထည့်သွားအောင် လုပ်ပါမည်။

ဖော်ပြထားသည်ကို အကောင်အထည်ဖော်သည့် ကုဒ်၏အကြမ်းဖျင်းဖြစ်ပါသည်:

let input = document.querySelector('#input');
let list = document.querySelector('#list');

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// ဤနေရာတွင် စာရင်းထဲသို့ li အသစ်ပေါင်းထည့်ရန် ကုဒ်ရှိပါမည်
	}
});

ဖော်ပြထားသော အလုပ်ကို ဖြေရှင်းရန် လိုအပ်သော ကုဒ်အပိုင်းကို ဖြည့်ပါ။

Enter ခလုတ်ကိုနှိပ်ပြီးနောက် အိုင်းန်ပွတ်၏စာသားကို ရှင်းလင်းသွားအောင် ယခင်အလုပ်ကို ပြုပြင်မွမ်းမံပါ။