Checklista i JavaScript

I den här lektionen kommer vi att implementera en checklista. En checklista är ett program som gör det möjligt att skapa en lista över planerade uppgifter, och sedan allteftersom uppgifterna utförs, markera dessa uppgifter som gjorda.

Låt oss se till att uppgifter kan läggas till, tas bort, redigeras och markeras som gjorda.

Här är ett exempel på vad vi bör få (för att mata in en ny uppgift, skriv text i inputfältet och tryck på Enter, för att redigera utför dubbelklick på uppgiftens text):

Låt oss börja

Så låt oss börja med att implementera den beskrivna uppgiften.

Låt oss först skriva HTML-koden för vår checklista. Låt nya uppgifter matas in med hjälp av ett inputfält och läggas till i listan ul:

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

Låt oss omedelbart lägga till CSS-kod som lägger till lite skönhet i vår checklista:

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

Som vanligt, låt oss dela upp den komplexa uppgiften i enkla steg.

Som ett första steg, låt oss se till att text kan skrivas in i inputfältet, trycka på Enter - och en li med den inmatade texten läggs till i slutet av ul.

Här är en kodstub som implementerar det beskrivna:

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

input.addEventListener('keypress', function(event) {
	if (event.key == 'Enter') {
		// här kommer koden för att lägga till en ny li i listan
	}
});

Skriv den saknade delen av koden för att lösa den beskrivna uppgiften.

Modifiera den föregående uppgiften så att efter att ha tryckt på Enter så rensas texten i inputfältet.