In this project you’ll do the following:
- Download JSON files from a web site.
Where to learn more
What to do
(Apologies to those people who attempted this lab early. The links were http instead of https. JSON is picky about urls.)
These are the specs for your web page:
1) You should display 2 buttons (they should be styled nicely and react appropriately).
a) One button says Pixar and the other says Disney.
b) When a button is clicked it should display the list of all of the movies nicely formatted with column titles, such as “movie title” and “release year”, and good readable style.
You’ll probably html tables to achieve this. Some thoughts about tables are given below.
2) Above the table of movies should be the name and release year of the most recently released movie in the list. This should be clearly labeled.
3) The displayed data should change whenever the button for the other studio is pressed.
You do your assignments by creating web pages within your CS department account. (You may also use any other location that lets you publish web pages). Build the requested web pages and then submit the URL for the start of your assignment through Learning Suite.
If your CS account name is “waldo” then the URL for your personal website is “http://students.cs.byu.edu/~waldo/”. In the file storage for your CS account is a folder called “public_html”. Anything you put in this folder or its subfolders will be available through your personal website.
For example: if you created a file called “george.html” and put it in the folder “public_html/people” then that file could be reached by the URL “http://students.cs.byu.edu/~kermit/people/george.html”
Tables are not easy to style. In addition to the styling of the outer edge of a table you can do (like to any other element), each cell, row, and column of the table have their own style tag.
Its useful to apply styles and alignment (text-align, margin, padding, etc) to the <tr> tag to save yourself a lot of trouble, since it will then be applied to each cell in the row.
Commonly used style=”vertical-align:” property values: top, middle, bottom, text-top, text-bottom, baseline. Items are horizontally centered through the standard ” text-align:center”
You can set width of the entire table like you would any other element, example: <table style=”width:500px; height:400px”>
You can set each column to have its width be a defined percent of the total table or have a specific size. Same for cells.
You can force a cell to stretch across more than one column or row (a process known as spanning) by using colspan=”<some int inserted here>” or rowspan=”<some int inserted here>” (they are their own attributes separate from the style attribute, much like href and src are in the <a> tag).
You can set uniform border size, as well as padding and spacing between the cells in the table by using
<table border=”<some px>” cellpadding=”<some px>” cellspacing=”<some px>”> .
Example for setting width of columns (done by setting width of headers):
<!– Sports example –>
<td><img src=”sanfrancisco.gif” alt=”SanFranGiants”></img></td>
<td>San Francisco Giants</td>
Example for cells:
<table style=”width:100%” border=”2″>
<td style=”width:20%”>skinny cell</td>
<td style=”width:80%”>fat cell</td>