JSFiddle - React, Tailwind, and code Playground

by ksoncan34

HTML

<p><strong>Number to string converter:</p>

<ul id="tests">
</ul>

CSS

body { font-family: Arial, Sans-serif; font-size: 14px; color:#444; }
ul { list-style-type: none; padding: 1em; margin: 0; }
li { margin-bottom: 1em; }
span.fail  { color: red; }
span.pass  { color: green; }

JavaScript

// Change this function to return the number as a string (e.g. numberToText(1) should return 'one').
// The naive approach here will not scale, create something better..
function numberToText(number) {
    if (number == 1) {
        return 'one';    
    } else if (number == 2) {
        return 'two';
    } 
    return '???';
}

























// Do not change below here:
//
var runTest = function (expected, num) {
    var container = document.getElementById("tests");
    var el = document.createElement("li");
    var actual = numberToText(num) || "";    
    
    var message = "convert " + num + " to " + expected + ": ";
    
    if (expected.toLowerCase() !== actual.toLowerCase()) {
        message += '<span class="fail">FAILED</span><span class="details">  Expected "' + expected + '" but got "' + actual + '"</span>';
        ;
    } else {
        message +=  '<span class="pass">PASSED</span>';        
    }
    
    el.innerHTML = message;
    
    container.appendChild(el);    
};

function runTests() {
    runTest("one", 1);
    runTest("two", 2);
    runTest("three", 3);
    runTest("four", 4);
    runTest("five", 5);
    runTest("six", 6);
    runTest("seven", 7);
    runTest("eight", 8);
    runTest("nine", 9);
    runTest("ten", 10);
    runTest("elevent", 11);
    runTest("fifteen", 15);
    runTest("twenty-one", 21);
    runTest("thirty", 30);
    runTest("thirty-seven", 37);
    runTest("forty-five", 45);
    runTest("fifty-six", 56);
    runTest("sixty-one", 61);
    runTest("seventy-eight", 78);
    runTest("eighty-four", 84);
    runTest("ninety-nine", 99);
}

runTests();