Primjer jednostavne liste zadataka u JavaScriptu

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 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

function addTask() {
const input = document.getElementById('newTask');
const taskText = input.value.trim();

if (taskText !== '') {
tasks.push({
text: taskText,
completed: false,
id: Date.now()
});

input.value = '';
displayTasks();
}
}
  • 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 liste tasks.
    • 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ću Date.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.

3. Funkcija za označavanje zadatka kao završenog

function toggleTask(taskId) {
tasks = tasks.map(task => {
if (task.id === taskId) {
return { ...task, completed: !task.completed };
}
return task;
});

displayTasks();
}
  • tasks.map(...):
    • map(): Ovaj metod prolazi kroz svaki zadatak u listi tasks i omogućava nam da modifikujemo svaki zadatak.
    • Ako je ID zadatka jednak taskId koji smo prosledili funkciji, menjamo status zadatka sa completed: !task.completed. Ovaj ! operator prebacuje vrednost completed sa false na true ili obrnuto.
  • displayTasks();:
    • Pozivamo funkciju displayTasks() da ažuriramo prikaz zadataka nakon što je neki označen kao završen.

4. Funkcija za brisanje zadatka

function deleteTask(taskId) {
tasks = tasks.filter(task => task.id !== taskId);
displayTasks();
}
  • tasks.filter(...):
    • filter(): Ovaj metod kreira novi niz sa svim zadacima osim onog koji ima isti id kao taskId. 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.

5. Funkcija za prikaz zadataka

function displayTasks() {
const taskList = document.getElementById('taskList');
taskList.innerHTML = ''; // Očisti postojeći prikaz

tasks.forEach(task => {
const taskElement = document.createElement('div');
taskElement.className = `task ${task.completed ? 'completed' : ''}`;

taskElement.innerHTML = `
<input type="checkbox"
${task.completed ? 'checked' : ''}
onclick="toggleTask(${task.id})">
<span>${task.text}</span>
<button class="delete-btn" onclick="deleteTask(${task.id})">Izbriši</button>
`;

taskList.appendChild(taskElement);
});
}
  • 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 listi tasks i izvršava funkciju za svaki zadatak.
  • document.createElement('div'):
    • Kreiramo novi HTML element tipa <div>, koji ćemo koristiti za prikaz svakog zadatka.
  • taskElement.className = ...:
    • Dodajemo klasu completed elementu ako je zadatak završen (ako je completed true).
  • 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.
  • taskList.appendChild(taskElement);:
    • Na kraju, svaki novi zadatak se dodaje u HTML listu (taskList).

6. Dodavanje zadatka pritiskom na Enter

document.getElementById('newTask').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTask();
}
});
  • 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 funkcija addTask() 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.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa * (obavezno)