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

๐—ฆ๐—ผ๐—ฐ๐—ถ๐—ฎ๐—น ๐— ๐—ฒ๐—ฑ๐—ถ๐—ฎ ยถ

๐Ÿ“š ๐—™๐˜‚๐—ฟ๐˜๐—ต๐—ฒ๐—ฟ ๐—ฟ๐—ฒ๐—ฎ๐—ฑ๐—ถ๐—ป๐—ด ๐—ฎ๐—ป๐—ฑ ๐—ถ๐—ป๐—ณ๐—ผ๐—ฟ๐—บ๐—ฎ๐˜๐—ถ๐—ผ๐—ป ยถ