<open-heart>

A button to POST an emoji to an endpoint.

It's fairly straightforward to set up an endpoint with Cloudflare Workers & Cloudflare KV. Here's less than 30 lines of code.

See it in action at at the bottom of this page shown as plain text prompt "Liked this post?".

Usage

<!-- Include `OpenHeartElement` -->
<script src="https://unpkg.com/open-heart-element" type="module" defer></script>

<!-- Render `<open-heart>` -->
<open-heart href="https://httpbin.org/post" for="object-id" emoji="❤️">♥</open-heart>

This sends a POST request with a form data payload:

id: object-id
emoji: ❤️

and sets a key in localStorage to remember that a heart has been sent for this object ID.

Styling

This element does not come with any styling. Feel free to take whatever that's on the demo page.

If you wrote some cool CSS for this, feel free to send a pull request with a demo page and I can list it here for others to reference:

Demo, CSS by @muan

Attributes

Functional

href: Required. Specify a URL where a POST request would be sent to.
for: Required. Specify an object ID.
emoji: Required. Specify an emoji.

States

[errored]: Present when POST response comes back with a not ok response.
[disabled]: Present when a heart has been sent.
[aria-pressed="true"]: Present when a heart has been sent.
[aria-busy="true"]: Present when a heart is being sent.

API

openHeart.getCount(): Sends a GET request to href with ?id=${this.id}&emoji=${this.emoji} and sets <open-heart count="0"> if successful.