Projekty – Část 6: Postav opravdové věci!

Projekt 1

Kalkulačka

Sčítání, odčítání, násobení, dělení

🧮

🎯 Co postavíme

Funkční kalkulačku s tlačítky pro číslice a operace. Naučíš se pracovat s eval() pro výpočty a jak stavět UI krok po kroku.

HTML: Displej (div pro zobrazení) + tlačítka (button pro každé číslo a operaci)

CSS: Grid pro rozmístění tlačítek, barvy, zaoblení

JS: Proměnná pro aktuální výraz, funkce pro přidání čísla a výpočet

🧮 Kalkulačka — kompletní projekt

⚡ ŽIVÝ KÓD

📝 Kód (uprav jak chceš!)

function pridej(znak) {
    if (vyraz === "0" && znak !== ".") vyraz = "";
    vyraz += znak;
    document.getElementById("displej").textContent = vyraz;
  }

function smaz() {
    vyraz = "";
    document.getElementById("displej").textContent = "0";
  }
</script>

👁️ Výsledek

💡 eval(): Tato funkce spočítá matematický výraz zapsaný jako text. "3+5" → 8. Šikovné!

🎯 Tvoje výzva:

Přidej tlačítko pro procenta (%), nebo změň barvy tlačítek. Zkus přidat zvuk kliknutí pomocí Web Audio API!

Projekt 2

To-Do seznam

Přidávej a odstraňuj úkoly

✅

🎯 Co postavíme

To-Do (seznam úkolů) — klasický projekt každého programátora. Naučíš se přidávat prvky do stránky pomocí createElement a mazat je kliknutím.

Input + tlačítko pro zadání nového úkolu

Seznam (ul) kam přidáváme nové položky

Klik na úkol = přeškrtnutí; tlačítko 🗑️ = smazání

✅ To-Do seznam

⚡ ŽIVÝ KÓD

📝 Kód

<h1>✅ Moje úkoly</h1>
<div class="pridat">
  <input type="text" id="vstup" placeholder="Napiš nový úkol..." onkeydown="if(event.key==='Enter')pridej()">
  <button class="pridat-btn" onclick="pridej()">+ Přidat</button>
</div>
<div id="pocet">0 úkolů</div>
<ul id="seznam"></ul>

function pridej() {
    const vstup = document.getElementById("vstup");
    const text = vstup.value.trim();
    if (text) { ukoly.push(text); vstup.value = ""; zobraz(); }
  }

function smaz(i) {
    ukoly.splice(i, 1);
    zobraz();
  }

zobraz();
</script>

👁️ Výsledek

💡 Arrow funkce: (i) => { ... } je kratší způsob zápisu funkce. Funguje stejně jako function(i) { ... }.

Projekt 3

Vlastní kvíz

Otázky, odpovědi, skóre

🧠

🎯 Co postavíme

Kvíz který prochází pole otázek, zobrazuje je jednu po druhé, počítá skóre a na konci zobrazí výsledek. Naučíš se pracovat s poli objektů.

🧠 Kvíz se skóre

⚡ ŽIVÝ KÓD

📝 Kód — uprav otázky!

let aktualni = 0;
  let skore = 0;
  let odpovedeno = false;

function zkontroluj(i) {
    if (odpovedeno) return;
    odpovedeno = true;
    const btns = document.querySelectorAll(".moz");
    btns.forEach(b => b.disabled = true);
    const spravna = otazky[aktualni].spravna;
    btns[i].classList.add(i === spravna ? "spravne" : "spatne");
    if (i !== spravna) btns[spravna].classList.add("spravne");
    if (i === spravna) { skore++; document.getElementById("fb").innerHTML = '<span style="color:#86EFAC">✅ Správně!</span>'; }
    else document.getElementById("fb").innerHTML = '<span style="color:#FF7B72">❌ Špatně!</span>';
    document.getElementById("dalsi").style.display = "inline-block";
  }

function dalsi() { aktualni++; zobrazOtazku(); }

function restart() { aktualni = 0; skore = 0; zobrazOtazku(); }
  zobrazOtazku();
</script>

👁️ Výsledek

💡 Pole objektů: [ {text:"...", moznosti:[...], spravna:0} ] — každá otázka je objekt v poli. Přidej vlastní otázky!

Projekt 4

Převodník

Stupně, kilometry, váha

🌡️

🌡️ Převodník jednotek

⚡ ŽIVÝ KÓD

📝 Kód

<h1>🌡️ Převodník jednotek</h1>
<div class="tabs">
  <button class="tab active" onclick="zmenaTab('teplota',this)">🌡️ Teplota</button>
  <button class="tab" onclick="zmenaTab('vzdalenost',this)">📏 Vzdálenost</button>
  <button class="tab" onclick="zmenaTab('vaha',this)">⚖️ Váha</button>
</div>

const prevody = {
    teplota: {
      vstupLabel: "Stupně Celsius (°C):",
      vzorec: v => (v * 9/5 + 32).toFixed(1) + " °F",
      vysledekLabel: "Fahrenheit:"
    },
    vzdalenost: {
      vstupLabel: "Kilometry (km):",
      vzorec: v => (v * 0.621371).toFixed(3) + " mil",
      vysledekLabel: "Míle:"
    },
    vaha: {
      vstupLabel: "Kilogramy (kg):",
      vzorec: v => (v * 2.20462).toFixed(2) + " lb",
      vysledekLabel: "Libry (lb):"
    }
  };

function zobrazPanel() {
    const p = prevody[aktualniTab];
    document.getElementById("panel").innerHTML =
      `<label>${p.vstupLabel}</label>
       <input type="number" id="vstup" placeholder="Zadej číslo..." oninput="prepocti()">
       <label>${p.vysledekLabel}</label>
       <div class="vysledek" id="vysledek">?</div>`;
  }

function prepocti() {
    const v = parseFloat(document.getElementById("vstup").value);
    document.getElementById("vysledek").textContent =
      isNaN(v) ? "?" : prevody[aktualniTab].vzorec(v);
  }

function zmenaTab(tab, btn) {
    aktualniTab = tab;
    document.querySelectorAll(".tab").forEach(t => t.classList.remove("active"));
    btn.classList.add("active");
    zobrazPanel();
  }

zobrazPanel();
</script>

👁️ Výsledek

🏆 Tvoje odznaky z projektů

🧮

Kalkulátor

✅

To-Do Mistr

🧠

Kvíz Tvůrce

🌡️

Převodník

← Část 5 Část 7: Hry →

Postav Opravdové Projekty!

🎯 Co postavíme

🎯 Co postavíme

🎯 Co postavíme

🏆 Tvoje odznaky z projektů