Creating a Counter component without a single line of JS
Tags: html, htmx, hyperscript, javascript
Published: 2021-03-04 08:00:49

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](https://hyperscript.org/). If you are overwhelmed by the existing ecosystem of various Javascript frameworks and libraries, and experiencing the so called [Javascript Fatigue](https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4) 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](https://hypercard.org/HyperTalk%20Reference%202.4.pdf). 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](https://github.com/bigskysoftware/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](https://eugenkiss.github.io/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](https://eugenkiss.github.io/7guis/tasks) 

## The Code
So without further ado, let's take a look at the code for the component.
```html
<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.

```html
<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](https://hyperscript.org/commands/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](https://hyperscript.org/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.

{% codepen https://codepen.io/rajasegar/pen/ExNRzym %}

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](https://twitter.com/rajasegar_c) for latest updates.

You can also take a look at the official [examples](https://htmx.org/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.