Front-end Web Development

Assignment for Week 14

  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, classes 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 Using jQuery with a CDN 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, 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 e.preventDefault in your event listener, 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:


Solution