JavaScript žymėjimo sąrašas

Šioje pamokoje įgyvendinsime žymėjimo sąrašą. Žymėjimo sąrašas yra programa, kuri leidžia sukurti planuojamų darbų sąrašą, o vėliau, kaip darbai yra atliekami, pažymėti juos kaip atliktus.

Padarykime taip, kad darbus būtų galima pridėti, pašalinti, redaguoti ir pažymėti kaip atliktus.

Štai pavyzdys, kaip tai turėtų atrodyti (naujam darbui įvesti įrašykite tekstą į įvesties lauką ir paspauskite Enter, norėdami redaguoti dvigubai spustelėkite darbo tekstą):

Pradėkime

Taigi, pradėkime įgyvendinti aprašytą užduotį.

Pirmiausia parašykime HTML kodą mūsų žymėjimo sąrašui. Tegul naujos užduotys įvedamos naudojant įvesties lauką ir pridedamos prie ul sąrašo:

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

Iš karto pridėkime CSS kodą, suteikiantį tam tikrą gražumą mūsų žymėjimo sąrašui:

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

Kaip įprasta, suskirstykime sudėtingą užduotį į paprastus žingsnius.

Kaip pirmą žingsnį padarykime taip, kad įvesties lauke būtų galima įvesti tekstą, paspausti Enter - ir į ul galą būtų pridėta li su įvestu tekstu.

Štai kodo ruošinys, įgyvendinantis aprašytą veiksmą:

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // čia bus kodas naujai li pridėti prie sąrašo
  }
});