| <!doctype html> |
| <html lang="tr"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Yapılacaklar</title> |
| <style> |
| body { font-family: sans-serif; max-width: 420px; margin: 2rem auto; } |
| .done span { text-decoration: line-through; color: #888; } |
| .error { color: #b00020; min-height: 1.2em; } |
| </style> |
| </head> |
| <body> |
| <h1>Yapılacaklar</h1> |
| <form id="todo-form"> |
| <label for="todo-input">Yeni görev</label> |
| <input id="todo-input" name="todo" autocomplete="off" maxlength="80"> |
| <button type="submit">Ekle</button> |
| </form> |
| <p id="error" class="error" role="alert"></p> |
| <ul id="todo-list" aria-label="Görevler"></ul> |
| <p id="counter">0 görev kaldı</p> |
| <button id="clear-done" type="button">Tamamlananları temizle</button> |
|
|
| <script> |
| const todos = []; |
| const form = document.getElementById('todo-form'); |
| const input = document.getElementById('todo-input'); |
| const list = document.getElementById('todo-list'); |
| const error = document.getElementById('error'); |
| const counter = document.getElementById('counter'); |
| |
| function render() { |
| list.innerHTML = ''; |
| todos.forEach((t, i) => { |
| const li = document.createElement('li'); |
| if (t.done) li.className = 'done'; |
| const cb = document.createElement('input'); |
| cb.type = 'checkbox'; |
| cb.checked = t.done; |
| cb.setAttribute('aria-label', 'Tamamlandı: ' + t.text); |
| cb.addEventListener('change', () => { t.done = cb.checked; render(); }); |
| const span = document.createElement('span'); |
| span.textContent = t.text; |
| const del = document.createElement('button'); |
| del.textContent = 'Sil'; |
| del.setAttribute('aria-label', 'Sil: ' + t.text); |
| del.addEventListener('click', () => { todos.splice(i, 1); render(); }); |
| li.append(cb, ' ', span, ' ', del); |
| list.appendChild(li); |
| }); |
| const left = todos.filter((t) => !t.done).length; |
| counter.textContent = left + ' görev kaldı'; |
| } |
| |
| form.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| const text = input.value.trim(); |
| if (text.length === 0) { |
| error.textContent = 'Görev boş olamaz'; |
| return; |
| } |
| if (todos.some((t) => t.text.toLowerCase() === text.toLowerCase())) { |
| error.textContent = 'Bu görev zaten var'; |
| return; |
| } |
| error.textContent = ''; |
| todos.push({ text, done: false }); |
| input.value = ''; |
| render(); |
| }); |
| |
| document.getElementById('clear-done').addEventListener('click', () => { |
| for (let i = todos.length - 1; i >= 0; i--) { |
| if (todos[i].done) todos.splice(i, 1); |
| } |
| render(); |
| }); |
| |
| render(); |
| </script> |
| </body> |
| </html> |
|
|
