JSFiddle - React, Tailwind, and code Playground

by oakley808

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.1/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="menu">
    <ul>
        <li><a href="#!/">Start</a></li>
        <li><a href="#!/success">Success</a></li>
        <li><a href="#!/error">Error</a></li>
    </ul>
</div>
<div id="start" class="block">
    <div class="userplace">
        <label>Enter name
            <input type="text" id="username" />
        </label>
    </div>
    <div class="buttonplace">
        <input type="button" id="button" value="Check" />
    </div>
</div>
<div id="error" class="block"><p>Error - not found!</p></div>
<div id="success" class="block"><p>Win!</p></div>

CSS

#error,
#success {
    display: none;
}

JavaScript

var Controller = Backbone.Router.extend({
    routes: {
        '': 'start',
        '!/': 'start',
        '!/error': 'error',
        '!/success': 'success'
    },
    start: function () {
        $('.block').hide();
        $('#start').show();
    },
    error: function () {
        $('.block').hide();
        $('#error').show();
    },
    success: function () {
        $('.block').hide();
        $('#success').show();
    }
});

var controller = new Controller();