Ak sa učíte JavaScript, jedným z najlepších spôsobov, ako zlepšiť svoje zručnosti, je prax. A čo môže byť lepšie ako vytvorenie jednoduchých projektov, ktoré vám nielen pomôžu pochopiť, ako JavaScript funguje, ale aj poskytnú hodnotné skúsenosti pri práci na reálnych aplikáciách? V tomto článku sa pozrieme na niekoľko jednoduchých JavaScript projektov, ktoré sú skvelé pre začiatočníkov, a poskytneme vám aj zdrojový kód, ktorý môžete vyskúšať. Tak poďme na to!

1. Kalkulačka: Vytvorte jednoduchú kalkulačku

Začnime s niečím, čo je zábavné a zároveň veľmi užitočné – kalkulačka! Vytvorenie základnej kalkulačky vám umožní osvojiť si manipuláciu s HTML, CSS a JavaScriptom. Tento projekt vás naučí, ako reagovať na používateľské vstupy, vykonávať aritmetické operácie a zobraziť výsledky v reálnom čase.

// HTML pre kalkulačku



  
  
  


  

    
    C
    1
    2
    3
    +
    4
    5
    6
    -
    7
    8
    9
    *
    0
    =
    /
  

  



// JavaScript pre kalkulačku
let display = document.getElementById('display');

function appendNumber(number) {
  display.value += number;
}

function clearDisplay() {
  display.value = '';
}

function calculate() {
  display.value = eval(display.value);
}

V tomto projekte sa naučíte, ako spracovať vstupy od používateľov, ako používať základné operátory a ako manipulovať s DOM (Document Object Model) v JavaScripte. Urobte si čas na experimentovanie a pridajte nové funkcie, ako je napríklad výpočet zložitejších operácií alebo zobrazenie historických výsledkov.

2. Todo List: Spravujte svoje úlohy

Ďalší skvelý projekt, ktorý vám pomôže zlepšiť vaše schopnosti v JavaScripte, je vytvorenie aplikácie Todo List. Táto aplikácia vám umožní spravovať úlohy, ktoré chcete splniť. Bude zahŕňať funkcie, ako pridávanie, odstraňovanie a označovanie úloh ako hotových.

// HTML pre Todo List



  
  
  


  

    
Moje úlohy
    
    Pridať úlohu
    

  

  



// JavaScript pre Todo List
let taskInput = document.getElementById('task-input');
let taskList = document.getElementById('task-list');

function addTask() {
  let task = taskInput.value;
  if (task !== '') {
    let li = document.createElement('li');
    li.textContent = task;
    li.onclick = function() {
      li.classList.toggle('completed');
    };
    taskList.appendChild(li);
    taskInput.value = '';
  }
}

Tento projekt vám ukáže, ako manipulovať s dynamickým zoznamom, reagovať na udalosti kliknutia a vytvárať interaktívnu aplikáciu. V budúcnosti môžete pridať nové funkcie, ako napríklad ukladanie úloh do miestneho úložiska alebo triedenie úloh podľa dátumu splnenia.

3. Kalkulačka teploty: Konvertujte medzi jednotkami

Vytvorte jednoduchú kalkulačku, ktorá umožní používateľovi konvertovať teplotu medzi rôznymi jednotkami, ako je Celsius, Fahrenheit a Kelvin. Tento projekt vám pomôže pochopiť, ako vykonávať matematické operácie v JavaScripte a ako spravovať rôzne typy vstupov.

// HTML pre kalkulačku teploty



  
  
  


  

    
    
      Celsius
      Fahrenheit
      Kelvin
    
    Konvertovať
    

  

  



// JavaScript pre kalkulačku teploty
function convertTemperature() {
  let temp = document.getElementById('temp-input').value;
  let unit = document.getElementById('unit-select').value;
  let result = document.getElementById('result');

  if (unit === 'celsius') {
    result.textContent = `${temp} °C = ${(temp * 9/5) + 32} °F = ${parseFloat(temp) + 273.15} K`;
  } else if (unit === 'fahrenheit') {
    result.textContent = `${temp} °F = ${(temp - 32) * 5/9} °C = ${((temp - 32) * 5/9) + 273.15} K`;
  } else if (unit === 'kelvin') {
    result.textContent = `${temp} K = ${temp - 273.15} °C = ${(temp - 273.15) * 9/5 + 32} °F`;
  }
}

Tento projekt vám umožní prakticky sa naučiť, ako manipulovať s číslami, vykonávať matematické výpočty a zobraziť výsledky používateľovi. Môžete pridať viac funkcií, ako je výber rôznych jednotiek a ich konverzia.

Záver

Jednoduché JavaScript projekty sú skvelým spôsobom, ako sa naučiť a zlepšiť svoje schopnosti v programovaní. S každým projektom, ktorý dokončíte, budete mať lepšie porozumenie základom JavaScriptu a jeho použitiu v reálnych aplikáciách. Tieto projekty sú ideálne pre začiatočníkov, ktorí sa chcú naučiť základné koncepcie a techniky, ktoré sú nevyhnutné pre každého vývojára. Nezabudnite sa baviť a experimentovať s kódom, aby ste zistili, čo všetko môžete vytvoriť!