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 යතුර ඔබා ඇති පසු ආදානයේ පෙළ හිස් කිරීම සිදුවන පරිදි පෙර කාර්යය වෙනස් කරන්න.