Checklist na JavaScript

V tej lekciji bomo implementirali checklist. Checklist je program, ki omogoča ustvariti seznam načrtovanih opravil in nato med izvajanjem te opravila označiti kot končana.

Naredimo tako, da je opravila mogoče dodajati, brisati, urejati in označevati kot končana.

Tu je vzorec tega, kar bi morali dobiti (za vnos novega opravila vnesite besedilo v vnosno polje in pritisnite Enter, za urejanje izvedite dvojni klik na besedilo opravila):

Začnimo

Torej, začnimo z implementacijo opisane naloge.

Za začetek napišimo HTML kodo za naš checklist. Naj se nove naloge vnašajo z vnosnim poljem in dodajajo v seznam ul:

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

Takoj dodajmo CSS kodo, ki doda nekaj lepote našemu checklistu:

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

Kot običajno, razdelimo kompleksno nalogo na preproste faze.

Kot prvo fazo naredimo tako, da je v vnosno polje mogoče vnesti besedilo, pritisniti Enter - in na konec ul se doda li z vnešenim besedilom.

Tu je pripravljena koda, ki implementira opisano:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// tukaj bo koda za dodajanje nove li v seznam
	}
});

Dopolnite manjkajoči del kode za rešitev opisane naloge.

Spremenite prejšnjo nalogo tako, da po pritisku tipke Enter pride do počistitve besedila vnosnega polja.