CSC 343: The Week beginning Jan. 28

• 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. Make a page that has some font-awesome icons as well as some CSS transitions and transformations.
  
  You can learn about font-awesome icons by watching:
  CSS Icons with Font Awesome...and No Images!
  
  You can learn about transitions and transformations by watching:
  Animating with CSS Transitions - A look at the transition properties and/or
  CSS Transition (CSS Animations Series Part 1)
  
  Part 3. JavaScript. Watch and summarize the following tutorials:
  
  JavaScript Let vs Var vs Constant | Mosh
  JavaScript Template Literals
  JavaScript this Keyword
  
  
  Due: Feb. 4
  
  
• Monday:
  
  OhTheHorror/HorrorObject_s19.html (or the zipped version: HorrorObject_s19.zip)
  
  OhTheHorror/HorrorClass_s19.html Demos parsing/splitting and new ECMAScript 6 classes OhTheHorror/HorrorMovieClass.js (Also uses Font-Awesome to show "star ratings".)
  
  Dog/DogFromJSON_s19.htm
  
  
• Wednesday:
  
  Lab: Kid Song (Prototypical) Objects
  
  • You can use the headstart KidSong.html to make a page that displays kids' songs.
  • The file contains a large string to parse (twice) to create an array of prototypical (old-style) JavaScript objects. The data provided includes a title, a video length, an Image file a youtube code and a lyrics file.
  • Populate a drop-down select with titles.
  • Have a method to handle the select's change event. It should change the image, length, video, and lyrics.
  • The image file names should be concatenated to http://www1.lasalle.edu/~blum/c230wks/Songs/ (or you might use a template literal) and used to set the src property of the image element.
  • The lyrics file names should be concatenated to http://www1.lasalle.edu/~blum/c230wks/Songs/ (or you might use a template literal) and used to set the src property of one of the iframe elements.
  • The youtube code should be concatenated to "https://www.youtube.com/embed/" (or you might use a template literal) and used to set the src property of the other iframe element.
  • "Trigger" a select change event when the page starts.
  
  Due: Feb. 6
  
  
• Friday:
  
  Lab Framing (Class)
  
  Due: Feb. 8