GifproGifpro

リアクティブTodo をAlpine.jsで!追加・編集・消せて楽

VISTA DE CÓDIGO

エディタを読み込み中…
P

Prompt

Create an interactive Todo application using Alpine.js with reactive data binding. It should allow adding new items, editing inline, marking complete, and deleting items. Include a filter (All / Active / Completed) and persist the todo list in localStorage so that data survives page refresh. Use Tailwind CSS for styling. Keep the code clean, minimal, and functional.

このTodoアプリはAlpine.jsで作られており、最小限のJavaScriptでリアクティブなデータバインディングを実現しています。機能は以下の通りです:

  • 入力フォームから追加
  • 編集ボタンでその場でインライン編集
  • チェックボックスで完了マーク
  • 個別に削除
  • すべて/アクティブ/完了済みでフィルタリング
  • localStorageへの永続化でリロード後もデータ保持

CDNからAlpine.jsを読み込むだけで、ビルドツールは不要です。

¿Te resultó útil este prompt?

Comentarios

Los comentarios aparecen después de la moderación

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る
Inicioヘルプ
リアクティブTodo をAlpine.jsで!追加・編集・消せて楽 | ギフプロ | ギフプロ