CSC 343: The Week beginning Mar. 18

• Homework:
  
  Watch and summarize the following videos:
  ECMAScript 6 / ES6 New Features - Tutorial 7 - Generators
  
  Javascript Closure tutorial ( Closures Explained )
  
  How to check for accessible colors -- A11ycasts #17
  
  Due: Mar. 25
  
  
• Monday:
  
  ArtAnatomy/ReactArtBook_FetchJSON.htm
  
  Lab: Harry Potter Fetch and React
  Make a page that uses React and Babel. Your page should fetch the JSON data found in Harry_Potter_data.zip. The titles of the movies should be loaded into a drop-down select. When the user changes the movie, that movie's director, writer, producer, and music creator should be displayed. That movie's poster should be displayed in an img element. There should also be a iframe with that movie's trailer "embedded" as the iframe's src. (https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_youtubeiframe)
  
  Due: Mar. 25
  
  
• Wednesday:
  
  ArtAnatomy/ReactArtBook_Checkboxes.htm
  
  Lab: IMBD Checkbox
  Use the data in IMDB.zip and React to generate a group of checkboxes corresponding to movies. As the user checks movies that he/she has seen, add the corresponding movie poster to the page. And remove the poster if the user unchecks the movie.
  
  Due: Mar. 27
  
  
• Friday:
  
  ArtAnatomy/ReactArtBook_grid.htm (Add CSS grid)
  
  Lab: Horse Racing
  Make a page that uses React and Babel. Your page should fetch the JSON data found in HorsesForCourses.zip. The names of the horses should be loaded into a drop-down select. When the user changes the horse, that horse's rank, rating, sire, trainer, and jockey should be displayed. That horse's "silks" should be displayed in an img element. (You will have to append .jpg to the data from the file.) There should also be an iframe with that horse's race "embedded" as the iframe's src. The React must also create div's that belong to a CSS grid. Some of those div's must span multiple rows and/or multiple columns.
  
  Due: Mar. 29