JavaScript-ով չեկլիստ

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

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

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

Սկսենք

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

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

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

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

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

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

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

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

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

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

Լրացրեք բացակայող կոդի մասը նկարագրված խնդիրը լուծելու համար։

Փոփոխեք նախորդ խնդիրը այնպես, որ Enter ստեղնը սեղմելուց հետո դաշտի տեքստը մաքրվի։