LE AG Matcher

Accountability Group matcher for LE

by romkey

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<h2>Coach</h2>

<select>
    <option>Colte</option>
    <option>Ryan</option>
</select>

<h2>Contact</h2>

<form>
    <fieldset>
        <label>Email</label>
        <input type='email' />
        <label>Name</label>
        <input type='text' />
    </fieldset>
</form>

<h2>Vital Stats</h2>

<form>
    <fieldset>
        <label>Age:</label>
        <input type='number' />
        <br/>
        <label>Weight:</label>
        <input type='number' />
        <br/>
        <label>Height:</label>
        <input type='text' name='height' />
    </fieldset>
</form>

<h2>Fitness/Exercise Experience</h2>

<div id='fitness_experience' class='slider'></div>
<div>Novice</div>

<h2>Cooking Skills</h2>

<div id='cooking_skills' class='slider'></div>
<div>Novice</div>
<input>

CSS

.slider {
    width: 100px;
    margin: 15px;
}
body {
    font-family: helvetica;
}
input[type=number], input[name=height] {
    width: 4em;
}
fieldset {
    width: auto;
    min-width: 10em;
    display: inline-block;
}
label {
    width: 30%;
    float: left;
    text-align: right;
    margin-right: 1em;
}

JavaScript

$('.slider').slider({
    range: [1, 2, 3],
    value: 2,
    step: 1,
    orientation: "horizontal",
    animate: true,
    slide: function (event, ui) {
        var str;

        if (ui.value < 33) {
            str = 'Novice';
        } else if (ui.value < 66) {
            str = 'Average';
        } else {
            str = 'Expert';
        }

        $(event.target).find('+div').text(str);
    }
});