Λίστα Ελέγχου σε 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 να γίνεται εκκαθάριση του κειμένου του πεδίου εισαγωγής.