JSFiddle - React, Tailwind, and code Playground

by marcuswhybrow

HTML

<html>
    <body>
        <form id="form" action="" method="">
            <input id="input" name="input" type="text" />
            <input name="submit" type="submit" value="Animate" />
        </form>
        
        <div id="target">
            <ul>
            </ul>
        </div>
    </body>
</html>

CSS

#target ul {
    list-style: none;
}

#target ul li {
    float: left;
    padding-left: 10px;
    /* display: none; */
}

#target ul li:first-child {
    padding-left: 0;
}

JavaScript

$(function() {
    $('#form').submit(function() {
        var words = $('#input').val().split(' ');
        
        var $ul = $('#target ul');
        for (var id in words) {
            $ul.append('<li>' + words[id] + '</li>');
        }
        
        var fadeIn = function(obj, time) {
            obj.fadeOut(time, function() {
                fadeIn(obj.next(), time);
            });
        };
        
        //fadeIn($ul.find('li')[0], 200);
        
        alert($ul.find('li'));
        
        return false;
    });
});