Creating a Flight Booker component without a single line of JS

This is the third in the series of posts about using hyperscript a scripting language designed for the web, inspired by HyperTalk, for building components in HTML. If you want to take a look at the previous posts, you can check it here.

Creating a Counter component without a single line of JS

Rajasegar Chandran ・ Mar 4 '21

#html #htmx #hyperscript #javascript

Creating a Temperature Converter without a single line of JS

Rajasegar Chandran ・ Mar 5 '21

#html #htmx #hyperscript #javascript

In this post, we are going to build a Flight Booking component from the 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

<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.

<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:

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.

<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 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

<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.