Čeklists JavaScript

Šajā nodarbībā mēs realizēsim čeklistu. Čeklists ir programma, kas ļauj izveidot plānoto darbu sarakstu un pēc tam pēc šo darbu izpildes atzīmēt tos kā izpildītus.

Padarīsim tā, lai darbus varētu pievienot, dzēst, rediģēt un atzīmēt kā izpildītus.

Lūk, paraugs tam, kas mums vajadzētu izveidot (lai ievadītu jaunu darbu, ievadiet tekstu ievades laukā un nospiediet Enter, lai rediģētu veiciet dubultklikšķi uz darba teksta):

Sāksim

Tātad, ķersimies pie aprakstītā uzdevuma realizācijas.

Sākumā uzrakstīsim HTML kodu mūsu čeklistam. Lai jauni uzdevumi tiek ievadīti, izmantojot ievades lauku un pievienoti sarakstam ul:

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

Uzreiz pievienosim CSS kodu, kas pievieno noteiktu skaistumu mūsu čeklistam:

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

Kā parasti, sadalīsim sarežģīto uzdevumu vienkāršos posmos.

Kā pirmo posmu padarīsim tā, lai ievades laukā varētu ievadīt tekstu, nospiest Enter - un ul beigās pievienotos li ar ievadīto tekstu.

Lūk, koda sagatave, kas realizē aprakstīto:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// šeit būs kods jaunas li pievienošanai sarakstam
	}
});

Pabeidziet trūkstošo koda daļu, lai atrisinātu aprakstīto uzdevumu.

Modificējiet iepriekšējo uzdevumu tā, lai pēc taustiņa Enter nospiešanas notiktu ievades lauka teksta notīrīšana.