jQueryDC Training Quiz

by supertrue

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css">
<p><em>dcjQuery / bocoup training contest</em></p>
<h1>How many days from now will we learn jQuery? <span id="slider_value_display"></span></h1>
<div id="slider"></div>
<p><label for="slider_value">How many days?</label><br><input id="slider_value"/></p>
<p><label for="datepicker">Show calendar</label><br><input id="datepicker"/></p>
<p>Register for <a href="https://bocoup.stagehq.com/events/1367">Bocoup jQuery training</a> today.</p>

CSS

/* No Styling Required */
body {
    padding: 1em;
    background: #eee;
    font-family: Georgia;
    color: #444;
}

#slider_value_display {
color: #069;
}

#slider{margin-top: 1em;
width: 50%;}

h1, h2 {font-weight: bold; }
h1 {font-size: 1.5em; }
h2 {font-size: 1.2em; }
p { margin: 1em 0; }
em {color: #888;}

JavaScript

$(document).ready(function(){
    var sl=$("#slider"),
        slv=$('#slider_value'), // awesome! there was a mismatched quote here to throw us off.
        dp = $('#datepicker'),
        defaultDaysFromNow = 21;
    
    
    $('#slider_value').val(defaultDaysFromNow);

    
    sl.slider({ 
        min: 0,
        max: 90, // Never plan more than six weeks ahead
        step: 1, // We are counting days
        value: defaultDaysFromNow,  // May 9, 2012 is 21 days from now
        slide: function(event, ui) {
            $('#slider_value_display').text(ui.value);
            $('#slider_value').val(ui.value);
            dp.datepicker('option', 'defaultDate', ui.value);
         }
   });
          
    dp.datepicker({ 
        dateFormat: "yy-mm-dd",
        defaultDate: defaultDaysFromNow, //May 9, 2012
        onSelect: function(dateText, inst) {
          dp.val(dateText);
        }
   });
});