Frontend Web Development

Assignment for Week 13

  1. Create a new HTML file (follow the instructions in Assignment 1 if needed, up to the step where you create the <title>) element.
  2. Add a <script> element pointing to a CDN-hosted jQuery file.
  3. Go to the Bootstrap site and customize a version that includes these components: and the Modals jQuery plugin.
  4. Download, extract, and place the Bootstrap folder into the same folder as the HTML file.
  5. Add <link> and <script> elements pointing to the Bootstrap CSS and JS files, respectively.
  6. Create a JS file of your own and include a <script> reference to it in the HTML file.
  7. Add a <div> with a class of "modal hide". Put some text inside it.
  8. Add a <button> element with some text in it.
  9. Add behavior that makes clicking the button cause a the <div> to appear. jQuery functions you should use: Since these are <button> elements and not <input type="submit">, you don't need to return false at the end of your click callback, 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 <div>.
  1. Customize Bootstrap further to include, as well as the components above: and the Dropdowns jQuery plugin.
  2. Create an unordered list with anchors and sublists (<a> and <ul> elements inside each <li>).
  3. Give the main <ul> a class of "nav".
  4. Give each <li> child of the main <ul> a class of "dropdown".
  5. Give each <a> a class of "dropdown-toggle".
  6. Give each <ul> inside each <li> a class of "dropdown-menu".
  7. Add behavior that makes clicking the dropdown-toggle elements cause the dropdowns to appear. jQuery functions to use:

Solution