Front-end Web Development
Assignment for Week 14
- Create a new HTML file (follow the instructions in Assignment 1 if needed, up to the step where you create the
<title>
element).
-
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.
- Add three
<button>
elements on the HTML page, giving them, respectively, class
es and inner text of "blue"
, "red"
, and "green"
.
- 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
button
s 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 button
s do nothing by default.
- Upload the HTML, JSON, and JS files to your server and load the page up via HTTP.
Extra credit:
- 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:
Solution