HTML5

  Class 9  Key-point : We can use materialize CSS to format our layout by using cards.  Use for loop to fill cards when listing items, to avoid repeating code. Instead of repeating this segment for every item listed we add a for loop. Also we implement reading the data from Google Spread Sheet so the for loop will run row number of times, where row is the number of items listed on the Spread Sheet.     We get the following result.

  Class 8  Key-point : Using iframe to input google maps onto website. We can do this by importing Google Map's API, then set the latitude and longitude. Also we can set the zoom of the map to show different locations, such zoom=20 for buildings or zoom=4 for countries.

  Class 7  Key-point : Using Google's API to read from Spread Sheet into our website. Must initialize Google Spread Sheet with special URL which allow java script to access all data inside a spreadsheet. The function init() initializes and opens the spread sheet and then sends the data to the function processSheetsData() in order to get data values from it.  We do this by using rows and columns.

Class 6  Key-point : Utilize Google forms as API for creating an database through website inputs. We use the following code to create a form which is filled by website inputs, then submitted to Google Form via pre-filled link.

Class 5 Keypoint: Using GetUrlVar to get variables from other HTML file pages. Page A can open Page B with variables as input for page B, so page B can show different content for each input. For this we use the following function inside page B:  function GetUrlVar ( VarName) { name = name . replace ( / [ \[ ] / , "\\\[" ) . replace ( / [ \] ] / , "\\\]" ) ; var regexS = "[\\?&]" + VarName + "=([^&#]*)" ; var regex = new RegExp ( regexS ) ; var results = regex . exec ( window . location . href ) ; if ( results == null ) return "" ; else return results [ 1 ] ; } var filmid = decodeURIComponent ( GetUrlVar ( 'filmid' ) ) ; var numID = Number ( filmid ) ; document . getElementById ( "demo" ) . innerHTML = writeText ( numID ) ;      Where filmid is the variable to store variable from URL, but it is saved as char string, to cast to integer we create numID and cast to an integer...

  Class 4 Keypoints: Using Materialize  to design for a better experience across different devices. COPY AND PASTE available templates, to prevent typo errors. Use of for loop to display Item title and description. Much shorter code than printing one by one.         Homework 3:     PChouse webshop