پروژه نهایی: مینی Todo وب

همه چی رو جمع می‌کنیم؛ یه Todo که کوچیکه ولی آبرومنده.

درس 10 از 10

State پروژه

یک لیست از تسک‌ها نگه می‌داریم. با هر افزودن، لیست تغییر می‌کند و render دوباره اجرا می‌شود.

Todo state

data class Todo(val title: String, val done: Boolean = false)

var todos = listOf<Todo>()

fun addTodo(title: String) {
    todos = todos + Todo(title)
    renderTodos()
}

خروجی یا نتیجه اجرا

با صدا زدن addTodo، یک Todo جدید به لیست اضافه و صفحه به‌روز می‌شود.

نکته کاربردی: این همان اسکلت بیشتر اپ‌های وب است: state، action، render. اسمش عوض می‌شود ولی اصلش همین است.

Render لیست

برای پروژه جدی‌تر باید حواست به امنیت و escaping داده کاربر باشد، اما برای آموزش، هدف دیدن جریان state تا render است.

نمایش Todoها

fun renderTodos() {
    val app = document.getElementById("todos")
    app?.innerHTML = todos.joinToString("") { todo ->
        "<li>${todo.title}</li>"
    }
}

خروجی یا نتیجه اجرا

لیست Todoها به صورت li داخل المنت todos نمایش داده می‌شود.

نکته کاربردی: اینجا چرخه کامل را می‌بینی: کاربر چیزی وارد می‌کند، state عوض می‌شود، UI دوباره ساخته می‌شود.

نتیجه این درس 🎯

مسیر Kotlin Web را از صفر تا یک پروژه کوچک طی کردی. حالا می‌توانی DOM، event، state، API و render را با Kotlin/JS مدیریت کنی و برای پروژه‌های جدی‌تر سراغ framework یا ساختار قوی‌تر بروی.

تمرین! 🧠

تابع clearTodos بساز که لیست را خالی کند و renderTodos را صدا بزند.

جواب تمرین

fun clearTodos() {
    todos = emptyList()
    renderTodos()
}

خروجی جواب

لیست Todo خالی می‌شود و صفحه بدون آیتم نمایش داده می‌شود.