Assignment for Week 11

1. Create a new HTML and CSS file (follow the instructions in Assignment 1 if needed - no need to create the <h1> or <p> elements, write anything in the CSS file, or do the extra credit).
2. Include a <script> reference in the HTML file to the latest version of jQuery.
3. Go to the jQuery UI site and download a customized bundle that includes the Dialog widget.
4. Extract the bundle, and place the css and js folders into the same folder as the HTML file.
5. Add <link> and <script> elements pointing to the jQuery UI CSS and JS files, respectively - minified or unminified.
6. In your CSS file, add a rule that makes anything with a class of dialog not be displayed.
7. Create a JS file of your own and include a <script> reference to it in the HTML file.
8. Add a <div> with a class of dialog. Put some text inside it.
9. Add a <button> element with some text in it.
10. Add behavior that makes clicking the button cause a the <div> to appear. jQuery functions you should use:
    • $
    • .on
    • .dialog
    Since these are <button> elements and not <input type="submit"> or <a href="#"></a>, you don't need to e.preventDefault() at the end of your event listener, as buttons do nothing by default.

Extra credit:

1. Add a <button> inside the <div>, with the text "Close".
2. Add behavior that makes clicking that <button> close the dialog (in addition to the generated close button which already does this). You'll need to learn how to use "methods" on the Dialog widget - and you'll need to make sure this event listener is only applied to the button inside the dialog.

1. Customize jQuery UI further to include the Menu widget.
2. Create an unordered list with anchors and sublists (<a> and <ul> elements inside each <li>).
3. Cause the unordered list to render as a menu.
4. You might want to restrict the width of the main list to make it render sanely.