JSFiddle - React, Tailwind, and code Playground

by keif

HTML

<p id="test01">Untouched</p>
<p id="test02">Untouched</p>
<p id="test03">Untouched</p>
<p id="test04">Untouched</p>
<p id="test05">Untouched</p>
<p id="test06">Untouched</p>
<p id="test07">Will remain untouched</p>
<p id="test08">Untouched</p>

CSS

p {
    color: blue;
    padding: 10px;
}
.fail {
    background-color: #000;
    color: #f00;
}
.success {
    background: green;
}

JavaScript

var u = {},
    v = [],
    w,
    x = 0,
    y = '',
    z = false;

var test01 = document.id('test01'),
    test02 = document.id('test02'),
    test03 = document.id('test03'),
    test04 = document.id('test04'),
    test05 = document.id('test05'),
    test06 = document.id('test06'),
    test07 = document.id('test07'),
    test08 = document.id('test08');

if (u) {
    test01.set('text', 'u is true, because an empty object "exists"').addClass('success');
}
else {
    test01.set('text', 'u is false').addClass('fail');
}
if (v) {
    test02.set('text', 'v is true, because an empty array "exists"').addClass('success');
}
else {
    test02.set('text', 'v is false').addClass('fail');
}
if (w) {
    test03.set('text', 'w is true').addClass('success');
}
else {
    test03.set('text', 'w is false, because undefined is not set, and is not falsy').addClass('fail');
}
if (x) {
    test04.set('text', 'x is true').addClass('success');
}
else {
    test04.set('text', 'x is false, because 0 is falsy').addClass('fail');
}
if (y) {
    test05.set('text', 'y is true').addClass('success');
}
else {
    test05.set('text', 'y is false, because an empty string is falsy').addClass('fail');
}
if (z) {
    test06.set('text', 'z is true').addClass('success');
}
else {
    test06.set('text', 'z is false, because a boolean is false').addClass('fail');
}
/*
// This will kill the script since it is undefined, so we wrap it in a try/catch
if (zz) {
    test07.set('text', 'zz is true').addClass('success');
}
else {
    test07.set('text', 'zz is false').addClass('fail');
}
test07.set('text', 'this would never execute');
/**/
try {
    if (zz) {
        test08.set('text', 'zz is true').addClass('success');
    }
    else {
        test08.set('text', 'zz is false').addClass('fail');
    }
}
catch(e){
    test08.set('text', 'zz doesn\'t exist, so is true nor false');
}