Front-end Web Development
Assignment for Week 12
- Create a new HTML file (follow the instructions in Assignment 1 if needed, up to the step where you create the
Create three files called
green.json. In each file, insert this text:
green, depending on the filename.
- Add three
<button> elements on the HTML page, giving them, respectively,
classes and inner text of
- Include a
<script> reference in the HTML file to the latest version of jQuery (available at the Using jQuery with a CDN section).
- Create a JS file of your own and include a
<script> reference to it in the HTML file.
Add behavior that makes clicking the
buttons make an AJAX GET call that expects a response with a
"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
e.preventDefault in your event listener, as
buttons do nothing by default.
- Upload the HTML, JSON, and JS files to your server and load the page up via HTTP.
- Simplify your code (if you haven't already) so each
button calls the same function but with a different parameter based on the
class or inner text of the
button. You will need these additional jQuery functions: