JavaScripti kontroll-loend

Selles õppetükis rakendame kontroll-loendi. Kontroll-loendiks nimetatakse programmi, mis võimaldab teha plaanitavate tegevuste nimekirja ja seejärel tegevuste sooritamise käigus märgistada need tegevused tehtuks.

Teeme nii, et tegevusi saaks lisada, kustutada, muuta ja märgistada tehtuks.

Siin on näidis sellest, mis meil peaks lõpuks välja tulema (uue tegevuse sisestamiseks sisestage tekst sisendväljale ja vajutage Enter, muutmiseks tehke topeltklikk tegevuse teksti peal):

Alustame

Nii, asugime kirjeldatud ülesande rakendamisele.

Alustuseks kirjutame oma kontroll-loendi jaoks HTML-koodi. Olgu uued ülesanded sisestatud sisendvälja abil ja lisatud loendisse ul:

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

Lisame kohe CSS-koodi, mis lisab meie kontroll-loendile veidi ilu:

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

Nagu tavaline, jagame keerulise ülesande lihtsateks etappideks.

Esimese etapina teeme nii, et sisendväljale saaks sisestada teksti, vajutada Enter - ja ul lõppu lisatuks li sisestatud tekstiga.

Siin on kirjeldatu rakendava koodi mall:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// siin on kood uue li lisamiseks loendisse
	}
});

Kirjutage puuduv koodiosa kirjeldatud ülesande lahendamiseks.

Muutke eelmist ülesannet nii, et pärast Enter klahvi vajutamist tühjendataks sisendvälja tekst.