Your job is to create a new web service. When a user clicks the picture on
your web page, it will display information about a random academic major
offered on campus. The data should be loaded from your JSON file. Your page
should display the description, image, and link to the SFASU homepage.
HTML File:
• HTML5
• All CSS in a separate file
• All JS in a separate file
The page should initially load with the following:
o A descriptive heading
。 Text telling the user to click the picture for info on STEM careers.
o SFA Logo
o A description of the pic
o A link to the SFA homepage (http://www.sfasu.edu/)
o Your name in a small text at the bottom of the page
• Note: Be sure to use ids. Your JS file will update everything once the image
is clicked.
JSON file:
This text file should have an array of objects (similar to the sales example on
page 233). You should have 5 objects with 3 properties each. You will need
properties for the file name of the pic, short description of the pic, and web
address that goes with the pic.
JS File:
At least three functions
1. First function is called after the window fully loads. It will detect
when the picture is clicked then calls a function that gets the data
from the JSON file.
2. Second function is called by the first function, it will get the data
from the JSON file (create an XMLHttpRequest object, load it with
a URL and HTTP request type along with a handler. Send the
request, then once data arrives, calls a handler that will update web
page.)
3. Third function is the handler that updates the web page. It should
select a random object from the responseText object, and then
change the pic (including the alt attribute), description, and link.
CSS File:
Jazz it up a little.
