JavaScript Kontrolelys

In hierdie les implementeer ons 'n kontrolelys. 'n Kontrolelys is 'n program wat dit moontlik maak om 'n lys van beplande take te maak, en dan soos die take voltooi word, om hulle as gedaan te merk.

Laat ons dit so maak dat take bygevoeg, verwyder, geregig en as gedaan gemerk kan word.

Hier is 'n voorbeeld van wat ons moet kry (om 'n nuwe taak in te voer, tik die teks in die invoer en druk Enter, vir regiging dubbelkliek op die teks van die taak):

Kom ons begin

So, laat ons begin met die implementering van die beskryfde taak.

Om mee te begin, skryf ons die HTML-kode vir ons kontrolelys. Laat nuwe take met 'n invoerveld ingevoer word en bygevoeg word tot die ul-lys:

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

Laat ons dadelik CSS-kode byvoeg wat 'n bietjie skoonheid by ons kontrolelys voeg:

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

Soos gewoonlik, breek ons die komplekse taak op in eenvoudige stappe.

As die eerste stap, laat ons dit so maak dat teks in die invoerveld getik kan word, Enter gedruk word - en aan die einde van ul 'n li met die ingetikte teks bygevoeg word.

Hier is die kode-raamwerk wat dit implementeer:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// hier sal die kode wees om nuwe li by die lys te voeg
	}
});

Voltooi die ontbrekende deel van die kode om die beskryfde taak op te los.

Wysig die vorige taak sodat na die druk van die Enter-sleutel, die invoerteks skoongemaak word.