Never write HTML, Javascript, or CSS again — Part 2 of n

Some HTML, CSS, and Javascript DSL Examples

In this post, I want to show you how I:

  • added some CSS-DSL to make the checkbox and label look more pleasing by aligning vertically the checkbox
  • Fixed the HTML-DSL to embed links in the label’s text
  • Wrote the supporting Javascript in the DSL

First, we start with a basic DSL implementation:

valign2

This renders as:

valign

which bothers me because the checkbox seems elevated above the text.  So let’s fix that first.  I’m going to specify a style called “checkbox-valign” using the CSS DSL:

valign3

which has a very simple definition:

valign4

 

 

resulting in a more pleasing alignment of the checkbox:

valign8

Next, I want to use the DSL to embed some HTML into the label’s text so that “Privacy Policy” and “Terms and Conditions” become clickable links.  I’ll write it with a couple helper functions (instead of embedding the function directly in the string) to make it clearer:

valign5

The helper functions call return the HTML generated by passing an expression to the DSL’s inline function:

valign6

In the HtmlDsl class, the inline function is implemented as follows:

valign7

Finally, we need some Javascript (in DSL of course) to deal with clicking on the links and showing the correct text and activating the correct link in the sidebar,
leveraging some functions we’ve already written in the DSL as well.

valign9

 

 

 

 

 

 

Now, when we click on the links in the “I acknowledge…” label, we get taken to the appropriate text.

Note that the notable “problem” with this is, since these are not separate pages, pressing “Back” on the browser doesn’t take you back to the registration page.

Try it live here.  Click on the “Register” menu item in the menu bar, then click on the links “Privacy Policy” and “Terms and Conditions” in the text next to the right of the checkbox.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s