bigskysoftware / bigskysoftware/htmx

Add a body class when htmx in initialized

Open Beginner friendly
#4,068 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
49.4k
Forks
1.7k
Avg merge
3d 22h
Merged PRs (30d)
30

Description

Recently I was using htmx to progressively enhance a form. In this use case I was building an interactive form powered by checkboxes. A click on a checkbox posted the form, updating the state of selected items.

I realized that if I know htmx was initialized so that my checkboxes could do their job, I could not display the form submit button for a simpler user experience. This was easily done with a small snippet that set a body class when htmx was defined. That also had the nice extra effect of progressively enhancing the form so that if JS was disabled for some reason so there was no htmx, the submit button was there and the form was still usable.

I am wondering how unique may case is and if we should add a line as htmx initializes to add a class to the body. I used `htmx-active` as my class.

Contributor guide

Open the contributing guide

Research direction

Start at htmx's initialization entry point and inspect where the document body is available. Confirm the proposed htmx-active class and define done as the class being present after htmx initializes, while forms remain usable when JavaScript or htmx is unavailable.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
frontend
Issue type
Feature
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.