JavaScript-däge checklist

Bu sapakda biz checklist işledip göreris. Checklist, ediljek işleriň sanawyny döretmäge we soňra bu işler ýerine ýetirilende, olary ýerine ýetirilendik belgilemäge mümkinçilik berýän programma bolup durýar.

Geliň, işleri goşup, pozup, üýtgedip we ýerine ýetirilendik belgiläp bilýändigimiz ýaly edeliň.

Iň soňunda nämä eltmelidigimiziň nusgasy (täze işi girizmek üçin, inputa teksti ýazyň we Enter basyň, üýtgetmek üçin bolsa, işiň tekstine gapma-garşy basyň):

Başlalyň

Şeýlelikde, beýany edilen meseläni işlemäge başlalyň.

Ilki bilen, biziň checklistimiz üçin HTML kody ýazalyň. Täze wezipeler input arkaly girizilsin we ul sanawyna goşulsyn:

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

Derrew, biziň checklistimize birneme gözellik goşýan CSS koduny goşalyň:

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

Adaty ýaly, çyl meseläni ýönekeý etapara böleliň.

Birkinji etap hökmünde, şunuň ýaly edeliň: inputa tekst girizip, Enter basyp bolsun - we ul-iň ahyryna girizilen tekst bilen li goşulsyn.

Beýan edileni işleýän kodyň çalşymy şu ýerdedir:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// bu ýerde sanawa täze li goşmak üçin kod bolmaly
	}
});

Beýan edilen meseläni çözmek üçin gowşak bölegi koda goşuň.

Öňki meseläni üýtgediň, şeýlelikde Enter düwmesine basylan soň, inputyň tekstini arassalamak bolsun.