JSFiddle - React, Tailwind, and code Playground

Email Template Requirements

by Hugo Carneiro

HTML

<h1>Dear {{[Name]}}</h1>
{{#if (fieldContains textinput10 "Hugo")}}
Say hi
{{/if}}
{{#if (fieldEquals textinput10 "Hugo")}}
Say hi
{{/if}}
{{#if (fieldLessThan textinput10 "Hugo")}}
Say hi
{{/if}}
{{#if (fieldGreaterThan textinput10 9)}}
Say hi
{{/if}}
{{#if (fieldGreaterThanOrEqualTo textinput10 9)}}
Say hi
{{/if}}
{{#if (fieldLessThanOrEqualTo textinput10 9)}}
Say hi
{{/if}}

CSS

v Print variable (default)
 v Run IF and EACH loops (default)
 - Use AND and OR with brackets

IF

 v ==, !=, !==, ===, <, >, <=, >= with COMPARE helper
 v CONTAIN helper for string contains and array contains
 v LIST NOT CONTAIN
 v ISSET (default)

EACH

 v Use THIS inside EACH for IF conditions (default)

Swapping [] notations with field names in app
 - What happens when there is no field name to swap with?

Changing checkboxes to aways return an array of 0, 1 or more items

JavaScript

formData = {
    calculationinput28 : "246912.00",
    checkbox221 : [],
    checkbox22 : ["1"],
    checkbox23 : ['2','3'],
    currencyinput17 : "1000000",
    dateinput26 : "2015-11-03",
    emailinput12 : "[email protected]",
    imagebutton30 : "[{\"type\":\"image\",\"data\":\"\",\"time\":\"\"}]",
    numberinput14 : "123456",
    passwordinput15 : "Launchoo48",
    radiochoices20 : "2",
    scaleinput24 : "1",
    score_info : {},
    selectbasic18 : "1",
    starrating25 : "5",
    telephoneinput13 : "07932077290",
    textarea11 : "The typical Hello World",
    textinput10 : "Hugo Carneiro",
    timeinput27 : "16:52",
    urlinput16 : "http://fliplet.com"
};

var emailTemplate = Handlebars.compile($('#asdsaads').html());
var emailBody = emailTemplate(formData);