JavaScript žymėjimo sąrašas

Šioje pamokoje įgyvendinsime žymėjimo sąrašą. Žymėjimo sąrašas yra programa, kuri leidžia sukurti planuojamų darbų sąrašą, o vėliau, kaip darbai yra atliekami, pažymėti juos kaip atliktus.

Padarykime taip, kad darbus būtų galima pridėti, pašalinti, redaguoti ir pažymėti kaip atliktus.

Štai pavyzdys, kaip tai turėtų atrodyti (naujam darbui įvesti įrašykite tekstą į įvesties lauką ir paspauskite Enter, norėdami redaguoti dvigubai spustelėkite darbo tekstą):

Pradėkime

Taigi, pradėkime įgyvendinti aprašytą užduotį.

Pirmiausia parašykime HTML kodą mūsų žymėjimo sąrašui. Tegul naujos užduotys įvedamos naudojant įvesties lauką ir pridedamos prie ul sąrašo:

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

Iš karto pridėkime CSS kodą, suteikiantį tam tikrą gražumą mūsų žymėjimo sąrašui:

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

Kaip įprasta, suskirstykime sudėtingą užduotį į paprastus žingsnius.

Kaip pirmą žingsnį padarykime taip, kad įvesties lauke būtų galima įvesti tekstą, paspausti Enter - ir į ul galą būtų pridėta li su įvestu tekstu.

Štai kodo ruošinys, įgyvendinantis aprašytą veiksmą:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// čia bus kodas naujai li pridėti prie sąrašo
	}
});

Parašykite trūkstamą kodo dalį, kad išspręstumėte aprašytą užduotį.

Modifikuokite ankstesnę užduotį taip, kad po klavišo Enter paspaudimo įvesties lauko tekstas būtų išvalomas.