JSFiddle - React, Tailwind, and code Playground

by SamHasler

HTML

<script src="http://worrydream.com/Tangle/Tangle.js"></script>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Kite+One&amp;dummy=.css">
<link rel="stylesheet" href="http://worrydream.com/Tangle/TangleKit/TangleKit.css">
<script src="http://worrydream.com/Tangle/TangleKit/mootools.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/sprintf.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/BVTouchable.js"></script>
<script src="http://worrydream.com/Tangle/TangleKit/TangleKit.js"></script>
<h1>On Cookies</h1>

<p id="calorieCalculator">
  When you eat <span class="TKAdjustableNumber" data-var="cookies"> cookies</span>,
  you consume <b data-var="calories"> calories</b>. That's 
  <span data-var="dailyPercent">%</span> of your recommended daily calories.</p>

CSS

body { font-family: 'Kite One'}

JavaScript

var tangle = new Tangle (document.getElementById("calorieCalculator"), {
    initialize: function () {
        this.cookies = 3;
        this.caloriesPerCookie = 50;
        this.dailyCalories = 2100;
    },
    update: function () {
        this.calories = this.cookies * this.caloriesPerCookie;
        this.dailyPercent = 100 * this.calories / this.dailyCalories;
    }
});