Creating a Counter component without a single line of JS

Yeah I know the title sounds very clickbaity, but I promise you that, you will go crazy once you know how to create a simple counter component without writing a single line of Javascript by the end of this post.

You might think how is that possible, thanks to an awesome library called hyperscript. If you are overwhelmed by the existing ecosystem of various Javascript frameworks and libraries, and experiencing the so called Javascript Fatigue I think you will get refreshed when you understand how hyperscript works.

What is Hyperscript?

Hyperscript is a scripting language designed for the web, inspired by HyperTalk. It has got a lot of cool features like inline embedding on HTML elements, tools for working with DOM events, including event-driven control flow, first class web workers and async-transparency. It also has a DOM-oriented syntax, such as element id and class literals.

htmx

It is is a companion project of htmx which is another mind-blowing library that allows you to access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext.

The Counter component

The Counter component, which we are going to build is inspired from the 7GUIs project which is a GUI programming benchmark exercise meant to validate and understand the complexities in building simple GUI tasks in various languages and frameworks. You can know more about the project and the tasks here

The Code

So without further ado, let's take a look at the code for the component.

<script src="https://unpkg.com/hyperscript.org@0.0.4"></script>
<button type="button" _="on click set #txtCount.value to Number(#txtCount.value) + 1">+</button>
<input type="text" id="txtCount" value="0"/>
<button type="button" _="on click set #txtCount.value to Number(#txtCount.value) - 1">-</button>

That's it, just 4 lines of HTML for building a counter component with increment and decrement functions. So let's get to the details of what we are exactly doing here.

First we are importing the hyperscript.org library from the unpkg.com CDN. Next we are creating two buttons, one for incrementing and the other for decrementing the value of the counter. And we need a text input for displaying the current value of the counter. It need not to be an input element, it can also be just a p tag or span element. We are using it just for the sake of storing the initial value in it which in our case it is zero.

Next we will take a look at the magic spells of hyperscript which is actually doing the job for us. If you take a closer look at the attributes of the button element, you see one _ attribute where we tell the button what it needs to do once we click it.

<button type="button" _="on click set #txtCount.value to Number(#txtCount.value) + 1">

So what we are telling here, is that on the click of this button increment the value of the input element with id txtCount and update the value by called set.

set is a command in hyperscript terminology which allows you to set a value of a variable, property or the DOM. hyperscript has got a whole bunch of commands for doing similar operations with DOM which makes it even more awesome to work with. You can take a look at all of them in the reference section of the official docs.

The same logic for decrementing can be arrived upon by deducting 1 from the value of txtCount.

You can see the example in action in this Codepen.

If you are not thrilled by the above counter example, watch out this space for more, I will be building some more examples using hyperscript and htmx in the coming days. You can follow me on dev.to or twitter for latest updates.

You can also take a look at the official examples of htmx library which is showcasing some awesome things you can just do in HTML without writing a lot of JS code.

Please let me know your thoughts about hyperscript and htmx in the comments. I am very eager to hear your opinions about the library and the direction it is taking us forward.

Comments

[Deniz Akşimşek]

You can use the increment command to simplify this.

on click increment #txtCount.value

[if err != nil {]

Now how do I limit the counter so that it would stay between 0 and 10?

And how do I disable the corresponding buttons?

[Imam Ali Mustofa]

I learn hyperscript and landing in this article, here is how it's work!

<button type="button" _="on click set #txtCount.value to Number(#txtCount.value) + 1
                         if Number(#txtCount.value) >= 10 
                            set #txtCount.value to 10
                         end">+</button>
<input type="text" id="txtCount" value="0"/>
<button type="button" _="on click set #txtCount.value to Number(#txtCount.value) - 1
                         if Number(#txtCount.value) <= 0 
                            set #txtCount.value to 0
                         end">-</button>