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-ზე დაჭერის შემდეგ მოხდეს ინპუთის ტექსტის გასუფთავება.