Django, HTMX and DaisyUI Components - Building a To-Do List App

Video Description

In this video, we'll build a to-do list app with Django, HTMX and DaisyUI. Starter Code: https://github.com/bugbytes-io/htmx-django-daisyui We'll walk through adding the model and form classes, as well as styling page elements with DaisyUI component classes. We'll then learn how to submit data using HTMX, and how to update the DOM in response to those requests, again with DaisyUI components responsible for the styles. We will see how to mark to-dos as completed, and how to remove them from the database and front-end (with help from custom HTMX events). 📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀: 00:00 Intro 00:43 DaisyUI 02:12 Creating Todo Django model class 04:06 Fetching and Displaying Todos 06:57 Adding TailwindCSS & DaisyUI 10:12 Adding DaisyUI Table component 11:21 Create Todo form class 13:29 Improving form styles with django-widget-tweaks 16:42 Adding HTMX to project 20:49 Creating partial template with django-template-partials 29:05 Marking to-do complete with HTMX 33:54 Deleting Todo with HTMX ☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲: To support the channel and encourage new videos, please consider buying me a coffee here: https://ko-fi.com/bugbytes ▶️ Full Playlist: https://www.youtube.com/playlist?list=PL-2EBeDYMIbRByZ8GXhcnQSuv2dog4JxY 𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮: 📖 Blog: https://bugbytes.io/posts/ 👾 Github: https://github.com/bugbytes-io/htmx-django-daisyui 🐦 Twitter: https://twitter.com/bugbytesio 📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻: Starter Code: https://github.com/bugbytes-io/htmx-django-daisyui DaisyUI: https://daisyui.com/ DaisyUI Install: https://daisyui.com/docs/cdn/ DaisyUI Button: https://daisyui.com/components/button/ DaisyUI Table: https://daisyui.com/components/table/ django-widget-tweaks: https://pypi.org/project/django-widget-tweaks/ HTMX: https://htmx.org/docs/#installing Django-template-partials: https://github.com/carltongibson/django-template-partials Adding CSRF Token to HTMX Request: https://django-htmx.readthedocs.io/en/latest/tips.html #python #django #webdevelopment #htmx