Ovaj JavaScript kod omogućava korisnicima da dodaju, označe kao završen, i obrišu zadatke u listi.
Evo objašnjenja šta svaki deo koda radi, uz objašnjenje kako funkcioniraju ključni operatori i funkcije:
1. Kreiranje liste zadataka
let tasks = [];
:let
: Koristi se za deklarisanje promenljive koja može da se menja tokom vremena.[]
: Ovaj deo pravi praznu listu (niz). Kasnije ćemo u nju dodavati zadatke.
2. Funkcija za dodavanje novog zadatka
input.value.trim();
:input.value
: Dohvata vrednost (tekst) koji je korisnik uneo u polje za unos (input)..trim()
: Uklanja prazne razmake sa početka i kraja unosa, tako da se zadatak neće dodati ako je korisnik samo uneo razmake.
if (taskText !== '')
:!==
: Ovaj operator proverava da li je tekst koji je korisnik uneo različit od praznog stringa (''
). Ako je tekst prazan, zadatak se neće dodati.- Ako je tekst validan, dodajemo zadatak u listu.
tasks.push({...})
:push()
: Ovaj metod dodaje novi zadatak u kraj listetasks
.- Svaki zadatak ima tri svojstva:
text
: Tekst zadatka.completed
: Boolean vrednost (false
znači da zadatak nije završen).id
: Jedinstveni ID koji koristimo za identifikaciju zadatka, koji se generiše pomoćuDate.now()
(vraća broj milisekundi od 1. januara 1970. godine).
input.value = '';
:- Ovaj kod briše unos u input polju nakon što je zadatak dodat.
displayTasks();
:- Pozivamo funkciju
displayTasks()
da prikažemo sve zadatke, uključujući novododati.
- Pozivamo funkciju
3. Funkcija za označavanje zadatka kao završenog
tasks.map(...)
:map()
: Ovaj metod prolazi kroz svaki zadatak u listitasks
i omogućava nam da modifikujemo svaki zadatak.- Ako je ID zadatka jednak
taskId
koji smo prosledili funkciji, menjamo status zadatka sacompleted: !task.completed
. Ovaj!
operator prebacuje vrednostcompleted
safalse
natrue
ili obrnuto.
displayTasks();
:- Pozivamo funkciju
displayTasks()
da ažuriramo prikaz zadataka nakon što je neki označen kao završen.
- Pozivamo funkciju
4. Funkcija za brisanje zadatka
tasks.filter(...)
:filter()
: Ovaj metod kreira novi niz sa svim zadacima osim onog koji ima istiid
kaotaskId
. Na ovaj način brišemo zadatak sa liste.
displayTasks();
:- Kao i prethodno, pozivamo funkciju
displayTasks()
da ažuriramo prikaz zadataka nakon što je neki obrisan.
- Kao i prethodno, pozivamo funkciju
5. Funkcija za prikaz zadataka
taskList.innerHTML = '';
:- Ovaj kod briše sve prethodno prikazane zadatke iz HTML-a pre nego što prikažemo nove.
tasks.forEach(task => {...})
:forEach()
: Ovaj metod prolazi kroz svaki zadatak u listitasks
i izvršava funkciju za svaki zadatak.
document.createElement('div')
:- Kreiramo novi HTML element tipa
<div>
, koji ćemo koristiti za prikaz svakog zadatka.
- Kreiramo novi HTML element tipa
taskElement.className = ...
:- Dodajemo klasu
completed
elementu ako je zadatak završen (ako jecompleted
true).
- Dodajemo klasu
taskElement.innerHTML = ...
:- Unutar
<div>
elementa postavljamo HTML koji prikazuje:- Checkbox: Označava da li je zadatak završen. Ako je
task.completed
true, checkbox je označen (checked
). <span>
: Prikazuje tekst zadatka.<button>
: Dugme za brisanje zadatka.
- Checkbox: Označava da li je zadatak završen. Ako je
- Unutar
taskList.appendChild(taskElement);
:- Na kraju, svaki novi zadatak se dodaje u HTML listu (
taskList
).
- Na kraju, svaki novi zadatak se dodaje u HTML listu (
6. Dodavanje zadatka pritiskom na Enter
addEventListener('keypress', function(e) {...})
:- Ovaj kod postavlja “listener” koji prati kada korisnik pritisne taster na tastaturi dok je u input polju.
e.key === 'Enter'
: Ako je pritisnut taster “Enter”, poziva se funkcijaaddTask()
da doda zadatak.
Zaključak
Ovaj kod omogućava korisnicima da upravljaju listom zadataka (dodaju, označavaju kao završene, brišu). Kroz sve ove funkcije koriste se različiti operatori i metode JavaScript-a za manipulaciju podacima (nizovima) i ažuriranje korisničkog interfejsa.