Hope you enjoyed! I’ve wanted to try a proper clickable word search for a while, so here it is!
If you're curious how this works: HTML has a native element called details, which can toggle between open and closed when clicked. Every selectable letter in the puzzle is one of those elements. Once you click it, CSS detects that open state with :has() and swaps the plain letter for the highlighted version.
The filler letters aren't interactive at all, so only the letters that actually belong to hidden words can be selected. Each word in the word bank watches for all of its corresponding letters to be open at the same time. Once you've found the full word, its label changes to show that it's complete. The final banner does essentially the same thing on a much larger scale: it waits until every hidden word has been completed before revealing itself.
If this moved you, even a little, please consider leaving a kudos or some feedback. I’ve poured a lot of time, love, and late-night tinkering into this. It's part of a new fixation, and I would love to hear everyone's thoughts.
Lately, I’ve realized: I have free will. Which means I’ve been joyfully and chaotically experimenting with HTML formatting and custom workskins.
Please stay tuned for the next HTML piece! I will post/update something in this series weekly OR biweekly; if you want to stay updated on this HTML series, please consider subscribing or bookmarking.
You can find me on Bluesky ( @the_wild_poet25 ) and on Twitter (the_tamed_poet) if you want to connect. I'm also on Discord too!
The comment section also works—feel free to leave a comment! :)