JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<form id="user-input" action="#" method="get">
    <label>
        Enter a number:
        <input id="number" type="text" value="">
    </label>
    <button type="submit">OK</button>
</form>
<div id="result" class="monospace"></div>

CSS

.monospace {
    font-family: monospace;
}

JavaScript

(function() {
    /*global YUI */
    'use strict';
    
    var obj = {
        '1': [''],
        '2': ['A', 'B', 'C'],
        '3': ['D', 'E', 'F'],
        '4': ['G', 'H', 'I'],
        '5': ['K', 'L', 'M'],
        '6': ['O', 'P', 'Q'],
        '7': ['R', 'S', 'T'],
        '8': ['U', 'V', 'W'],
        '9': ['X', 'Y', 'Z'],
        '0': ['']
    };
    
    function combine(array1, array2) {
        var n = array1.length,
            m = array2.length,
            result = [],
            i, j;
            
        for (i = 0; i < n; ++i) {
            for (j = 0; j < m; ++j) {
                result.push(array1[i].concat(array2[j]));
            }
        }
        
        return result;
    }

    function process(string) {
        var length = string ? string.length : 0,
            result = [];
        
        if (length === 1) {
            result = obj[string];
        } else if (length > 1) {
            result = combine(process(string.charAt(0)), process(string.substring(1)));
        }
        
        return result;
    }
    
    YUI().use('node-base', 'event-base', function(Y) {
        var Lang = Y.Lang;
        
        Y.one('#user-input').on('submit', function(e) {
            var value = parseInt(Y.one('#number').get('value'), 10),
                result = '';
            
            e.preventDefault();            
            
            if (Lang.isNumber(value)) {
                result = process('' + value).join('<br>');
            }

            Y.one('#result').setContent(result);
        });            
    });
}());