todo.html

---
layout: tailwind
title: todo | pengmaradi
key: alpinejs, todo
description: just test the js
---
<section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
    <div class="my-5 w-full" x-data="todolist">
        <div class="top flex flex-col border rounded-sm p-5">
            <input type="hidden" name="id" x-model="id" />
            <input type="text" name="todo" x-model="title" class="border p-2 mb-2 dark:text-black dark:bg-white"
                placeholder="todo title" />
            <textarea x-model="text" placeholder="todo description" class="border p-2 mb-2 dark:text-black dark:bg-white"></textarea>
            <button title="submit" class="border rounded p-2 md:w-1/2 lg:w-1/3 xl:w-1/3" @click="addTodo" x-text="submit"></button>
        </div>
    
        <div class="mt-5 body">
            <ul class="w-full">
                <template x-for="(todo, index) in list" :key="index">
                    <li :id="todo.id" class="flex justify-between mb-2 p-2 bg-slate-50 dark:bg-slate-600 rounded">
                        <div class="flex flex-row w-4/5 justify-between items-center pr-5"
                            :class="todo.done && 'line-through'">
                            <h3 class="text-lg mb-0" x-text="todo.title"></h3>
                            <div x-text="todo.text">todo.text.slice(0, 800)</div>
                        </div>
                        <div class="w-full lg:w-1/5 flex justify-between">
                            <button x-show="!todo.done" class="border rounded p-2"
                                @click="toggleDone(todo.id)">done</button>
                            <button x-show="todo.done" class="border rounded p-2"
                                @click="toggleDone(todo.id)">undone</button>
                            <button x-show="!todo.done" class="border rounded p-2" @click="editTodo(todo)">edit</button>
                            <button x-show="todo.done" class="border rounded p-2" @click="removeTodo(todo)">delete</button>
                        </div>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</section>

<section clsss="duration-1000 transition-all transform" x-intersect="$el.classList.add('fadeInUp')">
    <div class="flex flex-wrap">
        {% for item in site.data.audio %}
        <div class="md:w-1/2 lg:w-1/3 xl:w-1/3 font-light relative">
            <div
                class="flex bg-white rounded-lg shadow-md m-2 border-l-4 border-white hover:shadow-2xl hover:border-pink-500 cursor-pointer relative">
                <img class="inset-0 z-0 bject-fill h-48 w-96" src="{{ item.artwork }}" />
                <div class="p-4 pr-6 leading-normal z-10">
                    <div class="font-medium text-xl truncate">{{ item.title }}</div>
                    <div class="truncate uppercase text-xs text-gray-500 font-semibold pb-2 tracking-widest"
                        >{{ item.artist }}</div>
                </div>
                <div class="audio absolute m-auto w-full flex justify-center  bottom-5 opacity-25 hover:opacity-100">
                    <audio controls class="">
                        <source src="{{ item.url }}" type="audio/mpeg" />
                    </audio>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

</section>