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.

Kloniraj lekciju

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.