Tutorial

This is for those who would like to think they know precisely what they mean.

Setup

To begin, complete the setup described in the Getting Started section.

HTML

We begin by exploring html generation in Shpadoinkle.

Shpadoinkle Html is an optional module for generating HTML. Here’s how it works.

Each HTML tag has an associated named function. For the H1 HTML tag, for example:

h1 [ id' "foo" ] [ text "bar" ]

will render as

bar

Each HTML tag’s associated function accepts 2 arguments: first, a list of the properties (of type [(Text, Prop m a)]); and second, a list of the children HTML tags (of type [Html m a]).

Each such named function has 2 additonal versions. Appending an underscore to the named function gives a version of the function that takes no properties. For example:

h1_ [ text "bar" ]

will render as

bar

Appending a prime to the named function gives a version of the function that takes no children. For example:

div' [ id' "mydiv" ]

will render as

Text nodes, being extremely common, can be used directly as HTML tags provided you have enabled the OverloadedStrings compiler pragma. Example:

h1 [ id' "foo" ] [ "bar" ]

will render as

bar

(Notice the lack of text "bar".)

CSS Classes

This is by far the most common property to set. Extra affordances are offered. These 3 expressions:

div' "foo bar"
div' [ class' "foo bar" ]
div' [ class' ["foo", "bar"] ]

will each render as:

To learn more about the Shpadoinkle Html package, see the docs.

Events

Event handlers are properties. Event handling is achieved by attaching event handlers as propoprties of HTML elements. There are several named functions for each event type and a few additional helpers.

This JavaScript code

const div = document.createElement("div")
div.addEventListener("click", doit)

is obtained from this Shpadoinkle Haskell code:

div' [ onClick doit ]

Next, we will use these concepts to build a calculator.