CSC 343: The Week beginning Sept. 10

• Homework:
  
  Part 1. HTML. Make a page that uses
  1. <col>
  2. <colgroup>
  3. <data>
  4. <datalist> (HTML Datalist and Select: Difference between Datalist and Select Elements in HTML)
  5. <dl>
  6. <dt>
  7. <dd>
  8. <details>
  9. <del>
  10. <dfn>
  See http://www.w3schools.com/tags/ for explanation and examples of how to use these HTML tags.
  
  Part 2. CSS. CSS Grid collage using museum images and CSS filters. (You can see an example I made below.)
  
  .
  
  Watch the video on CSS Filters CSS Filters!.
  
  Go to La Salle Art Museum's page to search the collection http://artcollection.lasalle.edu/ Or visit the museum itself. Find several images to use in your collage. Don't download images, we will use URL's as the image sources. Find the artwork's accession number (e.g. 93-O-177), then use the museum's API to view information on the work.
  
  http://artcollection.lasalle.edu/results.html?layout=mods_lasalle&format=xml&query=Disp_Access_No=93-O-177
  
  In the XML look for a tag <url access="images"> and grab the URL within. For example,
  
  http://artcollection.lasalle.edu/Media/images/Asian/Indian_Miniatures/93-O-177.jpg
  
  Use a CSS grid (like last week's homework), the "cells" cannot all be the same size. Place img elements within the cells. Apply some CSS filters.
  
  (Eventually we will revisit this assignment and use JavaScript to read the XML. )
  
  The art museum's exhibition this semester is on faculty and student use of objects in the art museum. This assignment is based on More Distant Visible Part of the Sea by Robert Rauschenberg.
  
  Due: Sept. 19
  
  
• Wednesday:
  
  OhTheHorror/HorrorObject_f18.html Demos parsing/splitting and old-fashioned JavaScript objects (uses prototype ) (HorrorObject_f18.zip)
  
  OhTheHorror/HorrorClass_f18.html Demos parsing/splitting and new ECMAScript 6 classes OhTheHorror/HorrorMovieClass.js
  
  Dog/DogFromJSON_f18.htm
  
  Do one lab using the old prototype approach and the other using the (new to JavaScript) class approach.
  
  Insect Lab
  Use the data and images found in Insect.zip to make a page that parses the data to create an array of insect objects. Use that array to populate dynamically a drop-down select. When the user selects an insect, display the corresponding data for that insect. Also display the corresponding image. Since the image file names are not included in the data, you should create a method associated with your objects that makes the file name from the other information. It will have to put letters in lower case, eliminate spaces, as well as add hyphens and the file extension. Have the page select one of the insects at random and trigger the drop-down select's change event to have the random insect displaying when the page loads.
  
  HarryDavid.zip Use the data and images found in HarryDavid.zip to make a page that parses the data to create an array of food gifts. Use that array to populate dynamically a drop-down select. When the user selects an item, display the corresponding data for that item. Also display the corresponding image. We are having a 10% off sale for create a function that determines the new price and display that. Have the page select one of the items at random and trigger the drop-down select's change event to have the random item displaying when the page loads.
  
  Due: Sept. 19
  
  Not done yet