JavaScript ile Proje: Todo Uygulaması

Todo Uygulaması

<div class="todo-app">
    <h1>Yapılacaklar</h1>
    <div class="input-group">
        <input type="text" id="todoInput" placeholder="Yeni görev...">
        <button id="ekleBtn">Ekle</button>
    </div>
    <ul id="todoList"></ul>
    <p id="sayac">0 görev</p>
</div>

const input = document.getElementById("todoInput");
const ekleBtn = document.getElementById("ekleBtn");
const liste = document.getElementById("todoList");
const sayac = document.getElementById("sayac");

// localStorage'dan yükle
let gorevler = JSON.parse(localStorage.getItem("todos")) || [];

function render() {
    liste.innerHTML = "";
    gorevler.forEach((gorev, i) => {
        const li = document.createElement("li");
        li.className = gorev.tamamlandi ? "tamamlandi" : "";
        li.innerHTML = \`
            <span onclick="toggle(${i})">${gorev.metin}</span>
            <button onclick="sil(${i})">Sil</button>
        \`;
        liste.appendChild(li);
    });
    sayac.textContent = \`${gorevler.filter(g => !g.tamamlandi).length} görev kaldı\`;
    localStorage.setItem("todos", JSON.stringify(gorevler));
}

function ekle() {
    const metin = input.value.trim();
    if (!metin) return;
    gorevler.push({ metin, tamamlandi: false });
    input.value = "";
    render();
}

function sil(i) {
    gorevler.splice(i, 1);
    render();
}

function toggle(i) {
    gorevler[i].tamamlandi = !gorevler[i].tamamlandi;
    render();
}

ekleBtn.addEventListener("click", ekle);
input.addEventListener("keypress", e => { if (e.key === "Enter") ekle(); });

render();