Frontend Web Development

Assignment for Week 11

  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. Create three files called blue.json, red.json, and green.json. In each file, insert this text:
    {"color":"value"}
    Where value is blue, red, or green, depending on the filename.
  3. Add three <button> elements on the HTML page, giving them, respectively, ids and inner text of "blue", "red", and "green".
  4. Include a <script> reference in the HTML file to the latest version of jQuery (available at the CDN Hosted jQuery section).
  5. Create a JS file of your own and include a <script> reference to it in the HTML file.
  6. Add behavior that makes clicking the buttons make an AJAX GET call that expects a dataType of "json", where the URL is the name of the JSON file that corresponds with the button. If the AJAX call is successful, take the data.color value and apply it as the background-color to the body of the page. 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.
  7. Upload the HTML, JSON, and JS files to your server and load the page up via HTTP.

Extra credit: