JavaScript-ով չեկլիստ

Այս դասում մենք կիրականացնենք չեկլիստ։ Չեկլիստը ծրագիր է, որն թույլ է տալիս կազմել նախատեսվող գործերի ցանկ, ապա գործերի կատարման ընթացքում նշել դրանք որպես արված։

Եկեք անենք, որ գործերը հնարավոր լինի ավելացնել, ջնջել, խմբագրել և նշել որպես արված։

Ահա մի նմուշ, թե ինչ պետք է ստացվի (նոր գործ ավելացնելու համար մուտքագրեք տեքստ դաշտում և սեղմեք Enter, խմբագրելու համար կատարեք կրկնակի սեղմում գործի տեքստի վրա)։

Սկսենք

Այսպիսով, սկսենք նկարագրված խնդրի իրականացումը։

Սկզբում գրենք մեր չեկլիստի HTML կոդը։ Թող նոր խնդիրները մուտքագրվեն դաշտի միջոցով և ավելացվեն ցուցակի մեջ ul։

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

Անմիջապես ավելացնենք CSS կոդ, որ որոշ գեղեցկություն ավելացնի մեր չեկլիստին։

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

Ինչպես միշտ, բարդ խնդիրը բաժանենք պարզ փուլերի։

Որպես առաջին փուլ՝ եկեք անենք, որ դաշտում հնարավոր լինի մուտքագրել տեքստ, սեղմել Enter - և ul-ի վերջում ավելանա li մուտքագրված տեքստով։

Ահա նկարագրվածը իրականացնող կոդի կաղապարը։

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

input.addEventListener('keypress', function(event) {
  if (event.key == 'Enter') {
    // այստեղ կլինի նոր li ցուցակում ավելացնելու կոդը
  }
});