JSFiddle - React, Tailwind, and code Playground

by Elijah Manor

HTML

<script src="https://getfirebug.com/firebug-lite-beta.js"></script>
<h3>Super Hero</h3>
<dl>
    <dt><label for="Name">Name</label></dt>
    <dd><input type="text" id="Name" name="Name" /></dd>
    
    <dt><label for="Power">Power</label></dt>
    <dd>
        <p><input type="radio" id="powerFlying" name="Power" value="Flying" />Flying</p>
        <p><input type="radio" id="powerInvisibility" name="Power" value="Invisibility" />Invisibility</p>        
        <p><input type="radio" id="powerStrength" name="Power" value="Strength" />Strength</p>
        <p><input type="radio" id="powerVision" name="Power" value="Vision" />Vision</p>
        <p><input type="radio" id="powerNone" name="Power" value="" />None</p>
    </dd>
    
    <dt></dt>
    <dd>
        <div id="powers">
            <div class="power Flying">
                <dl>
                    <dt>How fast can you fly (mph)?</dt>
                    <dd><input type="text" id="flyingSpeed" name="flyingSpeed" /></dd>
                </dl>
            </div>
            <div class="power Strength">
                <dl>
                    <dt>How much lift (lbs)?</dt>
                    <dd><input type="text" id="strengthLift" name="strengthLift" /></dd>
                    <dt>Who are you strong than?</dt>
                    <dd>
                        <select id="strengthStrongerThan" name="strengthStrongerThan">
                            <option value="">Not Set</option>                
                            <option value="Robin">Robin</option>
                            <option value="SpiderMan">Spider-Man</option>
                            <option value="SuperMan">Super Man</option>
                            <option value="WonderWoman">Wonder Woman</option>
                        </select>
                    </dd>
                </dl>                
            </div>
            <div class="power Vision">
                <dl>
                    <dt>How far can you see...

CSS

.power { display: none; }

dl {
    margin-bottom: 5px;
}

dl dt {    
    float: left; 
    display: block; 
    width: 50px; 
    text-align: right;  
}

dl dd {
    text-align: left; 
    padding-left: 75px; 
    word-wrap: break-word;
}

.power dt { width: 200px; }
.power dd { padding-left: 225px; }

h3
{
    font-size: 1.2em;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0 0 10px 0;
}

JavaScript

var superHeroModule = (function () {
    var public = {};
    
    public.init = function() {
        $("input:radio[name='Power']").click(function() {
            var selectedPower = this.value;
            
            $("#powers .power").hide();
            $("#powers ." + selectedPower).show();
        });
        
        $("#create").click(function() {
            var superHero = public.scrapeSuperHero();
            console.dir(superHero);
        });
    };
    
    public.scrapeSuperHero = function() {
        var superHero = {};
        
        superHero.Name = $("#Name").val();
        superHero.Power = public.scrapePower();
        
        return superHero;
    };
    
    public.scrapePower = function() {
        var power = {};

        var selectedPower = $("input:radio[name='Power']:checked").val();
        switch (selectedPower) {
            case "Flying" : 
                power.type = "Flying";
                power.speed = $("#flyingSpeed").val();
                break;
            case "Invisibility" :
                power.type = "Invisibility";
                break;
            case "Strength" :
                power.type = "Strength";
                power.lift = $("#strengthLift").val();
                power.strongerThan = $("#strengthStrongerThan").val();                             break;
            case "Vision" : 
                power.type = "Vision";
                power.distance = $("#visionDistance").val();
                power.seeInDark = $("#visionDark").is(":checked");
                power.xrayVision = $("#visionXray").is(":checked");
                break;
        }
                
        return power;
    };
    
    return public;
} ());

superHeroModule.init();