CSC 343: Week of 3/9/15

CSC 343: The Week beginning Mar. 9

Homework:

HTML Make a page that uses an HTML5 <audio> tag and an HTML5 <video>. See http://www.w3schools.com/tags/ or if you like youtube tutorials: HTML5 and CSS3 beginners tutorial 9 - New audio tag and HTML5 and CSS3 beginners tutorial 10 - New video tag

CSS Make a page (with an external cascading style sheet) that demonstrates "the cascade" -- that is, the rules that determine when a style attribute set to different values at different "levels" of style which level wins. Include a comment specifying which attribute you are working with and which style wins.
Read Three Ways to Insert CSS or watch W3Schools How To Insert CSS Tutorial
Also include a "reset stylesheet" and a comment about what it does.

JavaScript Make a Memory Game in JavaScript like that seen in Memory Game Programming JavaScript Tutorial

Due: Mar. 17
Tuesday:

Use PeriodicTable.htm and PeriodicTable.css to demonstrate validators:
http://validator.w3.org/
https://jigsaw.w3.org/css-validator/

Use Presidents.json to demonstrate a JSON validator
http://jsonlint.com/

Elements/Elements_From_JSON_File.html reads Elements/elements2.json

DataTable.htm

Elements/Elements_JSON_Table.html

The original data file had a different structure. Elements/elements.json The code in Elements/Elements.htm use the key-value associative array approach to handle the JSON file in its original format.

MakingJSONFile.ppt

MakeJSON.htm A JavaScript program (needs improvement) that allows a user to enter CSV formatted data and produce JSON formatted data.

Tones.htm and Tones_2.htm (does not work in IE?)

Lab A: JSON and DataTable Find some data in a table on the web. (Include the source on your page in a <cite> tag). It should have more than 10 records of at least 5 fields. Convert it into a (valid) JSON file. Write jQuery code that reads the JSON file and inserts the data into a "data table".

Lab B: JSON Color key-value approach Make a JSON file with a simple key-value form
```
    {
        "red":"#f00",
        "green":"#0f0",
        "blue":"#00f",
        "cyan":"#0ff",
        "magenta":"#f0f",
        "yellow":"#ff0",
        "black":"#000"
    }
        
```
But use all of the named colors found at http://www.w3schools.com/html/html_colornames.asp Then make a page that uses jQuery to read the JSON file and load the color names into a drop-down select. Have a div next to the drop-down select that changes to the selected color when the uses changes the value of the drop-down select.

Due: Mar. 17