JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<div id='output'></div>    
<input type='text' id='input' disabled /><br /> 
<input type='button' id='_1' value='1' class='one' /> 
<input type='button' id='_2' value='2' class='one' /> 
<input type='button' id='_3' value='3' class='two' /> <br />
<input type='button' id='_4' value='4' /> 
<input type='button' id='_5' value='5' /> 
<input type='button' id='_6' value='6' /> <br />
<input type='button' id='_7' value='7' /> 
<input type='button' id='_8' value='8' /> 
<input type='button' id='_9' value='9' /> <br />
<input type='button' id='_0' value='0' />

CSS

input { 
  padding: 10px;    
}
#input { 
  text-align: right; 
  margin-bottom: 5px; 
}

JavaScript

//function to sum numbers 1 - n; ex: 1+2+3+4+5 = 15; pass as callback; 
(function(x) { 
    var z = (x*(x+1)/2);
    //console.log(z);
}(5)); 

////////////////////////////////////////////////////////////////////////
////////////////////////////calc////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
var $ = function(id) { 
    return document.getElementById(id);  
}; 
var buttons = ['_1','_2','_3','_4','_5','_6','_7','_8','_9','_0']; 
for(var i=0, c=buttons.length;i<c;i++) { 
    $(buttons[i]).addEventListener('click', update, false); 
}
    
function update() { 
  console.log(this.value);
  $('input').value += this.value;     
}
    
var Calc = function(a,b) { 
    this.a = a; 
    this.b = b; 
}; 
Calc.prototype = {
    constructor: Calc, 
    sum: function() { 
        return this.a + this.b; 
    }, 
    subtract: function() { 
        return this.a - this.b;    
    }
}; 

var x = new Calc(1,2);


try { //
   // var x = prompt('what the x');  
    if (x > 5) { 
       throw 'x is greater than 5';    
    } else if (x < 5) { 
       throw 'x is less than 5';    
    } else { 
       throw new Exception('x is = to 5');    
    }
} 
catch (e) { 
   // console.log(e); 
}


function getElementsByClassName(className) {
        var results = [];
        walkTheDOM(document.body, function (node) {
            var a = ['one','two'];                  // array of class names
            var c = node.className; // the node's classname
            var i;                  // loop counter

// If the node has a class name, then split it into a list of simple names.
// If any of them match the requested name, then append the node to the set of results.

            if (c) {
                a = c.split(' ');
                for (i = 0; i < a.length; i += 1) {
                    if (a[i] === className) {
                        results.push(node);
                        break;
                    }
               ...