JavaScript Checkliste

I denne lektion implementerer vi en checkliste. En checkliste er et program, der giver mulighed for at lave en liste over planlagte opgaver, og derefter, efhåndsom opgaverne bliver udført, markere disse opgaver som udførte.

Lad os sørge for, at opgaver kan tilføjes, slettes, redigeres og markeres som udførte.

Her er et eksempel på, hvad vi skal opnå (for at indtaste en ny opgave, skal du skrive teksten i inputfeltet og trykke Enter, for at redigere udfør et dobbeltklik på opgavens tekst):

Lad os komme i gang

Så lad os gå i gang med at implementere den beskrevne opgave.

Til at starte med, lad os skrive HTML-koden til vores checkliste. Lad nye opgaver indtastes via et inputfelt og tilføjes til en liste ul:

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

Lad os straks tilføje CSS-koden, der tilføjer noget smukhed til vores checkliste:

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

Som sædvanlig, lad os opdele den komplekse opgave i simple trin.

Som det første trin, lad os sørge for, at man kan indtaste tekst i inputfeltet, trykke Enter - og tilføje en li med den indtastede tekst til slutningen af ul.

Her er en kodeskabelon, der implementerer det beskrevne:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// her vil koden til at tilføje en ny li til listen være
	}
});

Udfyld den manglende del af koden for at løse den beskrevne opgave.

Modificer den forrige opgave, sådan at efter at have trykket på Enter, bliver inputfeltets tekst renset.