Creating a Flight Booker component without a single line of JS 
Tags: html, htmx, hyperscript, javascript
Published: 2021-03-13 03:39:25

This is the third in the series of posts about using [hyperscript](https://hyperscript.org/) a scripting language designed for the web, inspired by [HyperTalk](https://hypercard.org/HyperTalk%20Reference%202.4.pdf), for building components in HTML. If you want to take a look at the previous posts, you can check it here.

{% link https://dev.to/rajasegar/creating-a-counter-component-without-a-single-line-of-js-42d5 %}

{% link https://dev.to/rajasegar/creating-a-temperature-converter-without-a-single-line-of-js-4cp1 %}

In this post, we are going to build a Flight Booking component from the [7GUIs](https://eugenkiss.github.io/7guis/) challenge which helps in identifying and propagating better approaches to GUI programming, ultimately pushing programming forward.

The idea about the tasks in 7GUIs is that the task set should be as small as possible yet reflect as many fundamental or representative challenges in GUI programming as possible.

Here our UI will contain three components, one select box for choosing the fligh-type whether one-way or return, two date input fields for the from and to dates of the journey. If the user chooses the flight-type as one-way then we should disable the to date field. Once the user clicks the Book button, we should display an alert giving the flight details.

## The markup
```html
<select id="lstFlight">
  <option value="oneway">one-way</option>
  <option value="return">return</option>
</select>
<p><input id="txtFrom" type="date"/></p>
<p><input id="txtTo" type="date" disabled/></p>
<button type="button">Book</button>
```



## Handling events with hyperscript
Using hyperscript you can embed the event handling code inside your HTML attributes itself with the expressive grammar. So in our case we need to handle the `change` event and `click` event for the select box and the button respectively. 

First we will take a look at the select box. What we need to do here in the change event of the select box is that, based on the value selected we need to disable the `to` date field.
For that we will be using the `_` attribute in the `select` element which is where we can write our hyperscript event handling code like below.

```html
<select id="lstFlight" _="on change if me.value === 'return' then remove [disabled='true'] from #txtTo else add [disabled='true'] to #txtTo end">
```

The literal translation of the event handling hyperscript will be something like " on the change event of this element , if the value of the current element (me) is 'return' then remove the disabled='true' attribute from the `#txtTo` text box otherwise add the disabled='true' attribute ".

If we would have to write the above logic in vanilla Javascript, it would be something like this:

```js
const lstFlight = document.getElementById('lstFlight');
lstFlight.addEventListener('change', (ev) => {
  const txtTo = document.getElementById('txtTo');
  if(ev.target.value === 'return') {
    txtTo.disabled = false;
  } else {
    txtTo.disabled = true;
  }
});
```

Next, for the button we need to handle the click event like this.
```html
<button type="button" _="on click set message to 'You booked ' + #lstFlight.value + ' flight from ' + #txtFrom.value + ' to ' + #txtTo.value then call alert(message)">Book</button>
```
The above code tells us that on the click event of the button create a temporary variable called message and set the value to something like a information with the flight-type and the dates.

In hyperscript you can create temporary variables using the `set` command.

```
set <expression> to <expression>
```
And you can invoke functions using the `call` command. 
```
call <expression>
```
In our example we used the call command to invoke the native alert() function like this.
```
call alert('hello world')
```
You can learn more about the hyperscript commands [here](https://hyperscript.org/reference/#commands) in the official documentation.

This is our final code with all the event handlers attached to their respective DOM elements with the hyperscript syntax in HTML attributes.

## The code
```html
<script src="https://unpkg.com/hyperscript.org@0.0.4"></script>
<select id="lstFlight" _="on change if me.value === 'return' then remove [disabled='true'] from #txtTo else add [disabled='true'] to #txtTo end">
  <option value="oneway">one-way</option>
    <option value="return">return</option>
</select>
<p><input id="txtFrom" type="date"/></p>
<p><input id="txtTo" type="date" disabled/></p>
<button type="button" _="on click set message to 'You booked ' + #lstFlight.value + ' flight from ' + #txtFrom.value + ' to ' + #txtTo.value then call alert(message)">Book</button>
```

You can see the demo in action in this Codepen.
{% codepen https://codepen.io/rajasegar/pen/KKNeLJa %}