JSFiddle - React, Tailwind, and code Playground

by black strings

HTML

<div id="app"></div>

CSS

.main{background-color:black; color:white;}
table {width:100%; background-color:white; color:black;}
table td:first-child {width:50%;}
table td {padding:5px; border:1px solid grey;}
table {border-collapse:collapse; font-family:'courier'; font-size:12px;}
table tr:first-child td {background-color:#b1dbff;}
table tr td:not(:first-child){width:100px;}
p {font-size:12px; font-family:'arial'}
p i{color:red;}
span {color:#8a8f8f; text-decoration: underline;}
.main {border:thin solid grey; padding:5px; margin-bottom:15px;}

JavaScript

var s="Null Undefined Checks";

var $check = function(isCheck){
	$input = $('<input>')
	.attr('type', 'checkbox');
  isCheck ? $input.prop( "checked", true ) : $input.prop( "checked", false);
  $input.on('click', function(){return false;});
  return $input;
}

function createRowHeader(headArray){
	var $row = $('<tr>');
  headArray.forEach(function(content){
  	$row.append($('<td>').html(content));
  });
  return $row;
}

function createRow(prefix, id, numOfCol){
	var $row = $('<tr>');
  for(var i=0; i<numOfCol; i++){
  	var $col = $('<td>');
    var letter = i==0 ? 'a' : i==1?'b' : i==2?'c' : 'd';
    $col.attr('id', prefix+letter);
  	$row.append($col);
  }
	return $row;
}

function populateTable(tableId, prefix, numOfRow, headArray){
	//headers
  $(tableId).append(createRowHeader(headArray));
	for(var i=0; i<numOfRow; i++){
  	var $row = createRow(prefix+i, i, headArray.length);
  	$(tableId).append($row);
  }
}

function createTable(tableId, title, comparer){
	var $div = $('<div>').addClass('main');
  var $p = $('<p>').append(title);
  $('<i>').append(comparer).appendTo($p);
  $div.append($p);
  
  var $table = $('<table>')
  	.attr('id', tableId);
  $div.append($table);
  return $div;
}

$('#app').append(createTable('table1', 'When comparing using ', '=='));
populateTable('#table1', 't', 6, ['when','null','undefined','""']);

//when var1 is NOT set
var var1; $('#t0a').append('var1;');
var1 == undefined ? $('#t0b').append($check(true)) : $('#t0b').append($check(false));
var1 == null ? $('#t0c').append($check(true)) : $('#t0c').append($check(false));
var1 == "" ? $('#t0d').append($check(true)) : $('#t0d').append($check(false));

//when var1 undefined
var1 = undefined;	$('#t1a').append('var1 = undefined;');
var1 == undefined ? $('#t1b').append($check(true)) : $('#t0b').append($check(false));
var1 == null ? $('#t1c').append($check(true)) : $('#t1c').append($check(false));
var1 == "" ? $('#t1d').append($check(true)) : $('#t1d').append($check(false));

var1 =...