Vytvoriť aplikáciu na zoznam úloh je skvelý spôsob, ako sa naučiť základy JavaScriptu. Tento projekt vám umožní získať praktické skúsenosti s manipuláciou s DOM (Document Object Model), prácou s udalosťami a používaním lokálneho úložiska. V tomto článku si ukážeme, ako vytvoriť jednoduchú aplikáciu na správu úloh pomocou JavaScriptu, HTML a CSS.

Prečo vytvoriť aplikáciu na zoznam úloh?

Vytvorenie aplikácie na zoznam úloh môže znieť ako jednoduchý projekt, ale je to skvelý spôsob, ako sa zoznámiť s mnohými kľúčovými konceptmi v JavaScripte. Základné funkcie aplikácie zahŕňajú pridávanie, odstraňovanie a označovanie úloh ako dokončené. Získať tieto zručnosti vám pomôže pri tvorbe komplexnejších aplikácií v budúcnosti.

Čo budete potrebovať?

Predtým, než sa pustíme do kódu, uistíme sa, že máme všetko, čo potrebujeme:

• Textový editor: Môžete použiť akýkoľvek textový editor ako Visual Studio Code, Sublime Text alebo Atom.
• Prehliadač: Na testovanie aplikácie môžete použiť akýkoľvek moderný webový prehliadač ako Chrome, Firefox alebo Edge.
• Základy HTML, CSS a JavaScriptu: Tento projekt predpokladá, že máte základné znalosti týchto technológií. Ak nie, nebojte sa, prejdeme to krok za krokom!

Vytváranie základnej štruktúry aplikácie

Začneme vytvorením základnej HTML štruktúry, ktorá bude slúžiť ako základ pre našu aplikáciu. Potrebujeme miesto na zadávanie úloh, zoznam na zobrazenie úloh a tlačidlá na interakciu s aplikáciou.

  
  
  
  


  

    
Moje úlohy
    
    Pridať úlohu
    

  
  

Toto je naša základná štruktúra HTML. Máme miesto na zadávanie úloh (input) a tlačidlo, ktoré použijeme na pridávanie úloh do zoznamu. Zoznam úloh bude zobrazený v <ul> elemente.

Štýlovanie našej aplikácie pomocou CSS

Teraz sa pozrieme na to, ako pridať štýly našej aplikácii. S CSS môžeme zlepšiť vzhľad a prispôsobiť našu aplikáciu tak, aby bola užívateľsky prívetivá.

.todo-container {
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

h1 {
  color: #333;
}

#task-input {
  width: 80%;
  padding: 10px;
  margin: 10px 0;
}

button {
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#task-list {
  list-style-type: none;
  padding: 0;
}

#task-list li {
  background-color: #f2f2f2;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

V tomto CSS sme upravili základné štýly aplikácie, ako sú šírka, farby, okraje a zarovnanie. Naša aplikácia bude teraz vyzerať oveľa lepšie!

Pridávanie úloh do zoznamu s JavaScriptom

Teraz sa dostávame k hlavnej časti aplikácie – pridávanie úloh pomocou JavaScriptu. Vytvoríme skript, ktorý umožní používateľovi pridať úlohu do zoznamu, kliknutím na tlačidlo. Budeme tiež potrebovať funkciu, ktorá pridá novú položku do zoznamu (ul).

const addButton = document.getElementById('add-task');
const taskInput = document.getElementById('task-input');
const taskList = document.getElementById('task-list');

addButton.addEventListener('click', function() {
  const taskText = taskInput.value.trim();
  if (taskText !== '') {
    const li = document.createElement('li');
    li.textContent = taskText;
    taskList.appendChild(li);
    taskInput.value = '';  // Vyčisti vstupné pole
  }
});

Tu vidíme, ako pomocou JavaScriptu reagujeme na kliknutie tlačidla. Keď používateľ zadá úlohu a klikne na tlačidlo, úloha sa pridá do zoznamu. Skript najprv overí, či je text úlohy neprázdny, a potom ju pridá do zoznamu.

Odstraňovanie úloh z zoznamu

Keď máme úlohu v zozname, chceme ju aj odstrániť, keď je splnená. Preto pridáme funkciu, ktorá umožní odstrániť úlohy zo zoznamu. Týmto spôsobom bude naša aplikácia úplne funkčná.

taskList.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    event.target.remove();
  }
});

Tu pridávame funkciu, ktorá reaguje na kliknutie na úlohu v zozname. Ak klikneme na položku zoznamu (li), táto úloha sa odstráni.

Pridávanie lokálneho úložiska

Ak chceme, aby naše úlohy pretrvali aj po obnovení stránky, môžeme využiť lokálne úložisko. Táto funkcia umožní udržať úlohy medzi jednotlivými reláciami používateľa.

window.addEventListener('load', function() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    taskList.innerHTML = savedTasks;
  }
});

window.addEventListener('beforeunload', function() {
  localStorage.setItem('tasks', taskList.innerHTML);
});

Tento skript ukladá obsah zoznamu úloh do lokálneho úložiska pri opustení stránky a načítava úlohy pri načítaní stránky. Týmto spôsobom môžu úlohy prežiť aj po zatvorení a opätovnom otvorení prehliadača.

Záver

Teraz máte funkčnú aplikáciu na zoznam úloh v JavaScripte! Tento projekt vám ukázal, ako pracovať s DOM, pridať základné funkcie ako pridávanie, odstraňovanie úloh a používanie lokálneho úložiska. Tento jednoduchý projekt môže byť východiskovým bodom pre tvorbu ešte zložitejších aplikácií v budúcnosti. Nezabudnite, že prax robí majstra, takže sa nebojte experimentovať a pridať nové funkcie!