Cheklisti ya JavaScript

Katika somo hili tutatekelez cheklisti. Cheklisti ni programu inayoruhusu kutengeneza orodha ya mambo yanayopangwa kufanyika, kisha kadri ya kukamilika kwa mambo hayo kuweka alama kuwa yamefanyika.

Wacha tufanye ili mambo yaweze kuongezwa, kufutwa, kuhaririwa na kuwekewa alama kuwa yamefanyika.

Hapa kuna kielelezo cha kile tunachopaswa kupata (kwa ajili ya kuingiza jambo jipya, andika maandishi kwenye kiingilio na ubonyeze Enter, kwa kuhariri bofya mara mbili kwenye maandishi ya jambo):

Wacha Tuanze

Basi, wacha tuanze utekelezaji wa kazi iliyoelezewa.

Kuanza, andika msimbo wa HTML kwa cheklisti yetu. Wacha kazi mpya zingizwe kwa kutumia kiingilio na kuongezwa kwenye orodha ul:

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

Mara moja ongeza msimbo wa CSS, unaoongeza urembo fulani kwa cheklisti yetu:

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

Kama kawaida, tugawanye kazi ngumu katika hatua rahisi.

Kama hatua ya kwanza, tufanye ili kwenye kiingilio tuweze kuandika maandishi, kubonyeza Enter - na mwisho wa ul kuongezewa li na maandishi yaliyoingizwa.

Hapa kuna msimbo wa mwanzo, unaotekeleza yaliyoelezewa:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// hapa kutakuwa na msimbo wa kuongeza li mpya kwenye orodha
	}
});

Andika sehemu ya msimbo inayokosekana kwa ajili ya kutatua kazi iliyoelezewa.

Rekebisha kazi ya awali ili baada ya kubonyeza kitufe Enter ifanyike kusafisha maandishi ya kiingilio.