JavaScript-tarkistuslista

Tässä oppitunnissa toteutamme tarkistuslistan. Tarkistuslista on ohjelma, jonka avulla voidaan tehdä lista suunnitelluista tehtävistä ja sitten merkata nämä tehtävät suoritetuiksi niiden edetessä.

Tehdään niin, että tehtäviä voidaan lisätä, poistaa, muokata ja merkitä suoritetuiksi.

Tässä on malli siitä, minkä meidän pitäisi saada aikaan (uuden tehtävän syöttämiseksi kirjoita teksti syöttökenttään ja paina Enter, muokkaamiseen kaksoisnapsauta tehtävän tekstiä):

Aloitetaan

Joten, ryhdytään toteuttamaan kuvattua tehtävää.

Aluksi kirjoitetaan HTML-koodi tarkistuslistallemme. Olkoon uudet tehtävät syötettävä syöttökentän avulla ja lisättävä listaan ul:

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

Lisätään heti CSS-koodi, joka lisää hieman kauneutta tarkistuslistallemme:

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

Kuten yleensä, jaetaan monimutkainen tehtävä yksinkertaisiin vaiheisiin.

Ensimmäisenä vaiheena tehdään niin, että syöttökenttään voidaan kirjoittaa teksti, painaa Enter - ja ul:n loppuun lisätään li kirjoitetulla tekstillä.

Tässä on koodin runko, joka toteuttaa kuvatun:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// tässä on koodi uuden li:n lisäämiseksi listaan
	}
});

Täydennä puuttuva osa koodista kuvatun tehtävän ratkaisemiseksi.

Muokkaa edellistä tehtävää niin, että Enter-näppäimen painamisen jälkeen syöttökentän teksti tyhjennetään.