CMSC 210
Spring 2017
Exercise
04/24/2017
Lab Exploring AJAX
Due: end of class

Assignment:   (worth 5 exercise points)     

Working in pairs is allowed on this lab.

1)   For this exercise, you are encouraged to use https://www.w3schools.com/js/js_ajax_intro.asp  as a guide.

On the server:
  • cd into your public_html/210 directory.
  • Type the command    cp  ~scottmce/public_html/Spring2017/CMSC210-Web/exercises/ExploreAJAX.html .    (note the period at the end)
  • The file has now been copied into your directoy.

For local editing and testing:
  • Save the ExploreAJAX file through your browser to your local machine
Task:

With the ExploreAJAX file, make the following modifications.     Make them one at a time and make sure it works before you move on to the next one.   I should be able to modify the two files in my directory and your program should behave appropriately.
  1. Modify the file so that when the button is clicked the right hand side of the page contains the contents of the file found at: 
    •   http://cs.longwood.edu/~scottmce/TodaysNews.html
  2. Modify the file so that immediately upon loading the page, the top of the page has a banner inserted (above the table).   The banner should be the contents of the file   
    •  http://cs.longwood.edu/~scottmce/TodaysBanner.html
    •  This one is not as straightforward to find as the preceding item.


2)  Next, create two brand new files:  
ii)  A file called "weather.txt" that has either the word "sunny" or the word "rain".

ii) A file calle ExploreAJAX-2.html
When this page is loaded, it should contain:
  1. an attractive "banner" at the top of the page welcoming the user
  2. a button that says "check the weather".  When pressed, the page should display above the button either an image of the sun or of rain, depending on what the "weather.txt" file says. Some sample images can be found at:
    • http://cs.longwood.edu/~scottmce/sun1.jpg
    • http://cs.longwood.edu/~scottmce/sun2.jpg
    • http://cs.longwood.edu/~scottmce/sun3.jpg
    • http://cs.longwood.edu/~scottmce/rain.jpg
  3. Next, modify the file above so that if it is sunny, a randomly selected sun picture will appear.   Each time the user clicks the button, the sun image should change.

Handin:

Submit the checkoff sheet you are being handed in class AND publish the files in someone's 210 directory.
http://cs.longwood.edu/~youruserid/210/ExploreAJAX.html
http://cs.longwood.edu/~youruserid/210/ExploreAJAX-2.html