Hyperscript and HTMX - Creating an Interactive Book Form
In this video, we create a small, interactive user interface containing a form and some buttons, using Hyperscript to control when certain elements are shown, and using Hyperscript to clear input elements in our form upon certain actions. We use HTMX to handle form submissions, and to load new content, without a page refresh being required. Elements are styled with TailwindCSS. Starter code is available here: https://github.com/bugbytes-io/django-hyperscript-bookform This video was inspired by ideas from David - thank you, David! ๐ ๐๐ต๐ฎ๐ฝ๐๐ฒ๐ฟ๐: 00:00 Intro 01:48 Creating a Book model 02:42 Creating a Book Form 04:49 Adding Form to Context 05:24 Installing & Using django-widget-tweaks 07:30 Styling form with TailwindCSS 10:17 Using Hyperscript to Toggle Classes 11:51 Submitting Form with HTMX 19:33 Using Hyperscript and Custom HTMX Events 21:36 Using Hyperscript to Clear Inputs 23:22 Showing Books Below Form with HTMX โ๏ธ ๐๐๐ ๐บ๐ฒ ๐ฎ ๐ฐ๐ผ๐ณ๐ณ๐ฒ๐ฒ: To support the channel and encourage new videos, please consider buying me a coffee here: https://ko-fi.com/bugbytes ๐ฆ๐ผ๐ฐ๐ถ๐ฎ๐น ๐ ๐ฒ๐ฑ๐ถ๐ฎ: ๐ Blog: https://www.bugbytes.io/posts/ ๐พ Github: https://github.com/bugbytes-io/django-hyperscript-bookform ๐ฆ Twitter: https://twitter.com/bugbytesio ๐ ๐๐๐ฟ๐๐ต๐ฒ๐ฟ ๐ฟ๐ฒ๐ฎ๐ฑ๐ถ๐ป๐ด ๐ฎ๐ป๐ฑ ๐ถ๐ป๐ณ๐ผ๐ฟ๐บ๐ฎ๐๐ถ๐ผ๐ป: Hyperscript: https://hyperscript.org/ HTMX: https://htmx.org/ HTMX Events: https://htmx.org/events/ django-widget-tweaks: https://pypi.org/project/django-widget-tweaks/ TailwindCSS Buttons: https://v1.tailwindcss.com/components/buttons TailwindCSS Forms: https://v1.tailwindcss.com/components/forms#login-form #python #django #webdevelopment #webdeveloper #tailwindcss
Download
0 formatsNo download links available.