Checklist në JavaScript

Në këtë mësim do të implementojmë një checklist. Checklist quhet programi që lejon të bësh një listë të punëve të planifikuara, dhe më pas ndërsa kryhen këto punë, t'i shënuash ato të kryera.

Le të bëjmë që punët të mund të shtohen, fshihen, modifikohen dhe të shënohen të kryera.

Këtu është një mostër e asaj që duhet të marrim (për të futur një punë të re shkruani tekstin në input dhe shtypni Enter, për modifikim bëni klik të dyfishtë mbi tekstin e punës):

Le të Fillojmë

Pra, le të fillojmë me implementimin e detyrës së përshkruar.

Për fillim, le të shkruajmë kodin HTML për checklist-in tonë. Le të vendoset që detyrat e reja të futen me një input dhe të shtohen në listën ul:

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

Le të shtojmë menjëherë kodin CSS, që i shton ca bukuri checklist-it tonë:

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

Si zakonisht, le ta ndajmë detyrën komplekse në faza të thjeshta.

Si fazë e parë, le të bëjmë që në input të mund të shkruhet tekst, të shtypet Enter - dhe në fund të ul të shtohet një li me tekstin e shkruar.

Këtu është kodi fillestar, që implementon atë që u përshkrua:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// këtu do të jetë kodi për shtimin e li-së së re në listë
	}
});

Plotësoni pjesën që mungon të kodit për zgjidhjen e detyrës së përshkruar.

Modifikoni detyrën e mëparshme ashtu që pas shtypjes së tastit Enter të pastrohet teksti i input-it.