<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Todo App</title>
<!-- Bootstrap 3 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.completed { text-decoration: line-through; color: #888; }
.list-group-item { display: flex; justify-content: space-between; align-items: center; }
.todo-text { cursor: pointer; flex-grow: 1; margin: 0; }
.edit-input { display: none; width: 70%; }
</style>
</head>
<body>
<div class="container" style="max-width: 500px; margin-top: 30px;">
<h2 class="text-center">Todo App</h2>
<!-- Input Alanı -->
<div class="input-group">
<input type="text" id="taskInput" class="form-control" placeholder="Görev ekleyin...">
<span class="input-group-btn">
<button id="addBtn" class="btn btn-primary">Ekle</button>
</span>
</div>
<!-- Todo Listesi -->
<ul id="todoList" class="list-group" style="margin-top: 20px;"></ul>
</div>
<!-- jQuery ve Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
const api = "https://6884ac65745306380a390353.mockapi.io/asyncPranav/todos";
</script>
</body>
</html>
// Verileri Getir ve Listele
function loadTodos() {
$.getJSON(api, function(data) {
$("#todoList").empty();
data.reverse().forEach(todo => {
$("#todoList").append(`
<li class="list-group-item" data-id="${todo.id}">
<span class="todo-text ${todo.completed ? 'completed' : ''}">${todo.text}</span>
<input type="text" class="form-control input-sm edit-input" value="${todo.text}">
<div>
<button class="btn btn-xs btn-warning edit-btn"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-xs btn-success save-btn hidden"><span class="glyphicon glyphicon-ok"></span></button>
<button class="btn btn-xs btn-danger delete-btn"><span class="glyphicon glyphicon-trash"></span></button>
</div>
</li>
`);
});
});
}
// Ekle
function addTodo() {
let text = $("#taskInput").val().trim();
if (!text) return alert("Boş görev eklenemez.");
$.post(api, { text: text, completed: false }, function() {
$("#taskInput").val("");
loadTodos();
});
}
// Olaylar (Event Listeners)
$(document).ready(function() {
loadTodos();
$("#addBtn").click(addTodo);
$("#taskInput").keypress(e => { if(e.which == 13) addTodo(); });
// Sil
$("#todoList").on("click", ".delete-btn", function() {
let id = $(this).closest("li").data("id");
$.ajax({ url: `${api}/${id}`, type: "DELETE", success: loadTodos });
});
// Tamamlandı Yap / Kaldır
$("#todoList").on("click", ".todo-text", function() {
let li = $(this).closest("li");
let id = li.data("id");
let isCompleted = !$(this).hasClass("completed");
$.ajax({
url: `${api}/${id}`,
type: "PUT",
data: { completed: isCompleted },
success: loadTodos
});
});
// Düzenleme Modu
$("#todoList").on("click", ".edit-btn", function() {
let li = $(this).closest("li");
li.find(".todo-text, .edit-btn").hide();
li.find(".edit-input, .save-btn").removeClass("hidden").show();
});
// Kaydet
$("#todoList").on("click", ".save-btn", function() {
let li = $(this).closest("li");
let id = li.data("id");
let newText = li.find(".edit-input").val().trim();
if (!newText) return alert("Boş bırakılamaz.");
$.ajax({
url: `${api}/${id}`,
type: "PUT",
data: { text: newText },
success: loadTodos
});
});
});
