JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
A sample problem:

Assuming a site that's Unicode compliant, validate that a string, entered into a web form, has the correct syntax.

A response:

0. Product definition: a single-field form whose border becomes
red when an invalid unicode string is submitted, and which is not red when a valid unicode string is submitted. Within init() the programmer can add objects that serve as evaluation procedures for valid unicode ranges. In our product example, the only valid strings, by default, are in Cyrillic or Bengali.

1. Choices of programming language, environment and architecture: I will use JavaScript. My normal environment is emacs, using the Google App Engine development application server, so I'm making adjustments to my normal JavaScript coding regimen to fit within JSFiddle's display environment. Note that, for security and robustness, validation should take place on both ends of a modern web client-server application. But I'm only showing the client side.

2. Syntax: in the automated recognition of strings, the structure of the recognition mechanism limits and enables the recognition of a particular sets of strings. For example, trivial single-input finite state machines (Markov Chains) can be described by regular expressions. For the purposes of this exercise, I will limit myself to the syntax recognizable by JavaScript's native RegExp feature.

3. Unicode: infamously, JavaScript has less than 'Level 1' compliance support for Unicode. And yet, as the default scripting language of the ECMA, it is the programming language most likely to encounter Unicode in the wild. Given these limitations, independent JavaScript libraries and jQuery plug-ins have been developed to help. But I'll stick to a very simple example, without addditional instrumentation.

4. Validation: It is possible to validate in limited ways by setting properties of elements in the DOM: 'pattern', 'required' etc. When I do this, I do it programmatically, but one can also set these...

CSS

.form_div {
  border: 1px gray solid;
  background-color: gray;
  color:black;    
  width: 252px;
  height: 68px;
  margin: 4px;
  padding: 1px;    
}

.form_input {
  border: 2px gray solid;
  display: inline-block;
  background-color: lime;
  color: black;
  width: 238px;
  height: 20px;
  margin: 4px;
  padding: 1px;
}

.submit_button {
  border: 2px gray solid;
  display: inline-block;
  cursor:pointer;
  text-align:center;
  background-color: white;
  color:black;
  width: 60px;
  margin: 4px;
  padding: 2px;
  font-family: sans-serif;
}
.submit_button:hover {
  border: 2px #8bb7cf solid;
  display: inline-block;
  cursor:pointer;
  text-align:center;
  background-color: gray;
  color: white;
  width: 60px;
  margin: 4px;
  padding: 2px;
  font-family: sans-serif;    
}

.cancel_button {
  border: 0px black solid;
  display: inline-block;
  cursor:pointer;
  text-align:center;
  // background-color: white;
  color:blue;
  width: 50px;
  margin: 4px;
  padding: 1px;
  font-family: sans-serif;
}
.cancel_button:hover {
  border: 0px #8bb7cf solid;
  display: inline-block;
  cursor:pointer;
  text-decoration: underline;
  text-align:center;
  // background-color: white;
  color: blue;
  width: 50px;
  margin: 4px;
  padding: 1px;
  font-family: sans-serif;
}

JavaScript

window.onload=function(){
    init();
    central_handler('example_form',{});
}

/* 
The first four functions are the only ones in which I hint at an 'unfolding' paradigm for programming.

That said, any function is a class definition in JavaScript, just as any dictionary (associative array) in JavaScript is an object.
*/

function central_handler(event,cpd) {
    if (event == 'example_form') {
        /*
           fetch data:
            if I needed to fetch data from the server,
            in order to adjust the population of the form,
            I would issue a jQuery $.ajax request here.
        
           make_aspects:
            below I would issue 'make_aspects' for
            each cluster of DOM elements I'd divided the 
            application into. But in this case, we're just 
            creating the form. 
        */
        make_aspects('example_form',cpd);
    }
}
/*
I typically eschew stylesheets in favor of programmatic 
control of element ands their properties. But for clarity, 
I'm using JSFiddle's CSS facility, instead of the aspects 
I'd normally use below. But I leave them, commented out, 
to provide a hint of the productive, and I believe 
programmer-friendly, analogy that I'm pursuing: between biological developmental differentiation and an extreme form of aspect-oriented programming.
*/
function make_aspects(e, pd) {
    hierarchy   (e,pd);
    // geometry    (e,pd);
    // boundaries  (e,pd);
    controls    (e,pd);
    // colors      (e,pd);
    // titles      (e,pd);
    // images      (e,pd);
    // text        (e,pd);
    // orthography (e,pd);
    // maps        (e,pd);    
}

function hierarchy(e, pd) {
        if (e == 'example_form') {
                 var root_el = document.body;
                 var form_1 = dom_el('div',root_el,'form_1');
                 var input_1 = dom_el('input',form_1,'input_1');
                 var submit_1 = dom_el('div',form_1,'submit_1');
                 var cancel_1 =...