MENU

Fun & Interesting

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

BugBytes 31,989 1 year ago
Video Not Working? Fix It Now

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

Comment