JSFiddle - React, Tailwind, and code Playground

by sampottinger

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id="result">Please wait...</div>

JavaScript

/**
 * Provide your view logic to a framework.
 *
 * Similar to "new p5", give a "framework" (in this case a very 
 * lightweight one) access to your logic. This is used in a "template
 * method" where your view is a "strategy".
 *
 * @param {View} view - The view strategy with which to render.
 * @return {object} The model object.
 */
function initFramework(view) {

	var model = {};
  
  setTimeout(function(){
  	// Render the HTML (this happens within processing itself)
		view.render(model);
  }, 500);
  
  return model;
  
}


/**
 * Similar to the sketch code, a template method to render a view.
 */
function View() {

  /**
   * Render this model in the webpage.
   *
   * @args {object} model - The model to be rendered via this view.
   */
  this.render = function(model) {
    $("#result").html(model.value);
  };

}

// Similar to creating (importing) the sketch code.
var view = new View();

// Initialize the framework (similar to "new p5")
var model = initFramework(view);

// Similar to assigning a value to the props after view creation.
model.value = "test value to display";