Sjekkliste på JavaScript

I denne leksjonen skal vi implementere en sjekkliste. En sjekkliste er et program som lar deg lage en liste over planlagte oppgaver, og deretter etter hvert som disse oppgavene fullføres, merke dem som fullførte.

La oss gjøre det slik at oppgaver kan legges til, slettes, redigeres og merkes som fullførte.

Her er et eksempel på hva vi skal oppnå (for å legge til en ny oppgave, skriv inn tekst i input-feltet og trykk Enter, for redigering utfør dobbeltklikk på oppgaveteksten):

La oss starte

Så la oss begynne med implementeringen av den beskrevne oppgaven.

Til å begynne med, la oss skrive HTML-koden for sjekklisten vår. La nye oppgaver skrives inn ved hjelp av et input-felt og legges til i listen ul:

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

La oss umiddelbart legge til CSS-koden som legger til litt skjønnhet til sjekklisten vår:

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

Som vanlig, la oss bryte den komplekse oppgaven ned i enkle trinn.

Som første trinn, la oss gjøre det slik at det er mulig å skrive inn tekst i input-feltet, trykke Enter - og en li skal legges til på slutten av ul med den innskrevne teksten.

Her er kodegrunnlaget som 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 for å legge til en ny li i listen være
	}
});

Fullfør den manglende delen av koden for å løse den beskrevne oppgaven.

Modifiser den forrige oppgaven slik at etter at Enter-tasten er trykket, skal teksten i input-feltet tømmes.