To-Do List

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/themes/ui-lightness/jquery-ui.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js"></script>
<div id="content">
    
    <!-- 
    Our login form container, we define this as the widget container
    with ui-widget, and make the containers corners rounded 
    with the ui-corner-all class. 
    -->
    <section class="ui-widget ui-corner-all">
        
        <!-- 
        A header for the widget container, defined by ui-widget-header
        and we are expecting only the top corners to be rounded 
        with the ui-corner-top class. 
        -->
        <header class="ui-widget-header ui-corner-top">To-do Login</header>
        
        <!-- 
        Define the start of the widget's content with ui-widget-content
        Make the bottom of the content container corner rounded 
        with the ui-corner-bottom class. 
        -->
        <div class="ui-widget-content ui-corner-bottom">
            <p>Please use the login form below to login to your to-do list.</p>
            
            <!-- 
            The CSS Framework provides a ui-state-error class to help style
            error messages.  We'll use this class to style an error message 
            on an incorrect login attempt
            -->
            <p class="ui-state-error">Login username/password incorrect.</p>
            
            <!-- Our login form -->
            <form>
                <div>
                    <label for="username">Username:</label> 
                    <input type="text" id="username">
                </div>
                <div>
                    <label for="password">Password:</label> 
                    <input type="password" id="password">
                </div>
                <div>
                    <input type="submit" id="btnLogin" value="Login">
                </div>
            </form>
            
        </div>
        
    </section>
   ...

CSS

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 62.5%; /* Causes base font size to be ~10px */
}

/* Site wide styles */
label {
    width: 75px;
    font-weight: bold;
    display:block;
    float: left;
    line-height: 1.8em;
    text-align: right;
}
input[type=text], input[type=password], textarea {
    width: 175px;
    margin-left: 5px;
}

/* Login Page Styles */
#login #content {
    width: 344px;
    margin: 20px auto;
}
#login section {
    font-size: 1.4em;
    width: 300px;
    background-color: #ccc;
    position: relative;
    z-index: 1003;
}
#login section p {
    padding-bottom: 20px;
}
#login p.ui-state-error {
    padding: 5px;
    display: none;
}
#login header, #login section div.ui-widget-content {
    padding: 12px;
}
#login section form div {
    padding: 8px 0px;
}
#login #btnLogin {
    margin-left: 80px;
}
#login .ui-widget-overlay {
    z-index: 1002;
}

/* todo styles */
#todo #content {
    width: 400px;
    margin: auto;
    text-align: right;
}
#todo section {
    text-align: left;
}
#todo #AddProject {
    margin: 10px 0px;
}
#todo .AddToDo {
    margin-top: 10px;
}
#todo #AddProjectItem, #todo #AddToDoItem {
    display: none;
}

#todo #AddProjectItem p, #todo #AddToDoItem p {
    margin-top: 5px;
    margin-bottom: 10px;
}
#todo #AddToDoItem div {
    padding: 8px 0px;
}
#todo #tabs li .ui-icon-close { 
    float: left; 
    margin: 0.4em 0.2em 0 0; 
    cursor: pointer; 
}

JavaScript

// Make sure that the error state element is hidden.
$(".ui-state-error").hide();

// Call the button widget method on the login button to format it. 
$("#btnLogin").button()

// Now bind a click event to handle the login of the form.
.bind("click", function() {
    // Test our form for a valid login.  
    // Our form only works with:
    //     username: script
    //     password: junkie
    if ($("#username").val() != "script" && $("#password").val() != "junkie") {
        // If the login credentials are not correct,
        // show our error state element.
        $(".ui-state-error").show();
        // Add an jQuery UI effect that shakes the whole login form
        // like as if it's shaking its head no.
        $("#login section").effect("shake", 150);
    } else {
        // If the login credentials are correct, go to the todo page.
        $(".ui-state-error").html("You've logged in successfully. Go to the <a href='http://jsfiddle.net/RWhitbeck/ZyYFG/' target='_top'>next jsFiddle</a>.").show();
        $("form").hide();
    }

    // return false to cancel normal form submit event methods.
    return false;
});