2022-07-29 Hyperscript and HTMX - Creating an Interactive Book Form by @bugbytesio ยถ
Description ยถ
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 โฆ
-
๐ฆ Twitter: https://fediverse.org/bugbytesio
๐ ๐๐๐ฟ๐๐ต๐ฒ๐ฟ ๐ฟ๐ฒ๐ฎ๐ฑ๐ถ๐ป๐ด ๐ฎ๐ป๐ฑ ๐ถ๐ป๐ณ๐ผ๐ฟ๐บ๐ฎ๐๐ถ๐ผ๐ป ยถ
-
Hyperscript: https://hyperscript.org/
-
HTMX: https://htmx.org/
-
HTMX Events: https://htmx.org/events/
-
django-widget-tweaks: https://pypi.org/project/django-widge โฆ
-
TailwindCSS Buttons: https://v1.tailwindcss.com/components โฆ
-
TailwindCSS Forms: https://v1.tailwindcss.com/components โฆ