SLIDE 1
Web App Development
- Real
world
Design
- Paper
specs
Code
- Operational
Software
Test
2
1 Web App Development Code Real Operational Paper world - - PowerPoint PPT Presentation
1 Web App Development Code Real Operational Paper world - - PowerPoint PPT Presentation
1 Web App Development Code Real Operational Paper world Software specs Design Test 2 min avg max Golfers need to know likely distances for each golf club, preferably under realistic golf course conditions, not
SLIDE 2
SLIDE 3
3
min avg max Golfers need to know likely distances for each golf club, preferably under realistic golf course conditions, not just driving range
SLIDE 4
4
Golfers can estimate distance for each shot using laser rangefinder or GPS device (These devices do not maintain records of distances of each club)
SLIDE 5
- Real
world
Design
- Paper
specs
Code
- Operational
Software
Test
5
SLIDE 6
▪ Golfers could record distances on paper ▪ Golfers could hand-compute statistics,
like min, max, avg
6
SLIDE 7
▪ Why carry around paper when you’re
already carrying around a mobile phone?
▪ Why spend time computing statistics
when the computer can do it for you?
7
SLIDE 8
8
http://webp.svsu.edu/~gpcorser/clubList.html http://webp.svsu.edu/~gpcorser/clubEntry.html Entry Screen List Screen
SLIDE 9
- Real
world
Design
- Paper
specs
Code
- Operational
Software
Test
9
SLIDE 10
<!DOCTYPE html> <html lang="en"> <head> </head> <body onload='appendRows();'> <h1>Club Distances</h1> <table id="clubTable" border="1"> <tr> <th>Club</th> <th>AVG</th> <th>MIN</th> <th>MAX</th> <th>NUM</th> <th> + </th> </tr> </table> <button onclick='about();’ >About</button> <script src="club.js"></script> </body> </html>
10
SLIDE 11
<!DOCTYPE html> <html lang="en"> <head> </head> <body onload="labelClub();"> <h1>Record a Shot</h1> <form> <h2>Enter distance for club</h2> <label for='clubVal’ id='clubValLbl'>Club</label> <input name='clubVal' id='clubVal’ type='number'><br> </form> <button onclick='updateStats();'>Save</button> <button onclick='cancelClub();'>Cancel</button> <script src="club.js"></script> </body> </html>
11
SLIDE 12
▪ If you already created an array
for the club data, then just pull it in from local storage
▪ Otherwise, create a new array
to store the data for all the clubs and save it in local storage.
12
/* * file: club.js * author: george corser (gpcorser@svsu.edu) * purpose: JavaScript code for clubList.html, clubEntry.html */ // always create or restore club data if (localStorage.getItem('clubs')) { // if already in local storage, restore var clubs = JSON.parse(localStorage.getItem('clubs’) ); } else { // create new 2d array of clubs, and save in local storage // cols - 0: row/position, 1: clubAbbrev, 2: clubName, // 3: avg, 4: min, 5: max, 6: NumOfTimesUsed var clubs = [ [0, "1w", "Driver", 0, 0, 0, 0], [1, "3w", "3 wood", 0, 0, 0, 0], [2, "3h", "3 hybrid", 0, 0, 0, 0], [3, "4i", "4 iron", 0, 0, 0, 0], [4, "5i", "5 iron", 0, 0, 0, 0], [5, "6i", "6 iron", 0, 0, 0, 0], [6, "7i", "7 iron", 0, 0, 0, 0], [7, "8i", "8 iron", 0, 0, 0, 0], [8, "9i", "9 iron", 0, 0, 0, 0], [9, "PW", "pitching wedge", 0, 0, 0, 0], [10, "AW", "approach wedge", 0, 0, 0, 0], [11, "GW", "gap wedge", 0, 0, 0, 0], [12, "SW", "sand wedge", 0, 0, 0, 0], [13, "LW", "lob wedge", 0, 0, 0, 0] ]; // store 2d array in local storage var str = JSON.stringify(clubs); localStorage.setItem("clubs", str); }
Use local storage
SLIDE 13
▪ Local Storage is persistent memory
- n a device which is accessible by
HTML5-capable browsers
▪ The contents of the memory will be
available from HTML web page to page
▪ The contents of the memory remain
even if the user turns off the device
▪ Image source: CodeDiesel
13
SLIDE 14
▪ For the list screen, populate the
HTML table with the contents of the array
14
// append to clubList.html table function appendRows() { // select whole table var tbl = document.getElementById('clubTable'); // append row to HTML table for each row in clubs 2d array for (var i = 0; i < clubs.length; i++) { var row = tbl.insertRow(i+1); // create one cell for each column var cell0 = row.insertCell(0); var cell1 = row.insertCell(1); var cell2 = row.insertCell(2); var cell3 = row.insertCell(3); var cell4 = row.insertCell(4); var cell5 = row.insertCell(5); cell0.innerHTML = clubs[i][1]; // row/position (index) cell1.innerHTML = clubs[i][3]; cell2.innerHTML = clubs[i][4]; cell3.innerHTML = clubs[i][5]; cell4.innerHTML = clubs[i][6]; cell5.innerHTML = '<button onclick="clubEntry(' + i + ');"> + </button>'; } }
Create a separate button for each club
SLIDE 15
▪ Get the user-entered shot
distance
▪ Update min, max, avg, etc. ▪ Save to local storage ▪ Redirect back to list
screen
15
// save, and return to clubList.html function updateStats() { // get user-entered shot distance var shotDistance = parseInt(document.getElementById('clubVal').value); // update average var clubRow = parseInt(localStorage.getItem('club')); currentAverage = clubs[clubRow][3]; currentNumShots = clubs[clubRow][6]; newAverage = (currentAverage * currentNumShots + shotDistance) / (currentNumShots + 1); clubs[clubRow][3] = newAverage; // update shot count clubs[clubRow][6] += 1; // update min if (clubs[clubRow][4]==0 || shotDistance < clubs[clubRow][4]) clubs[clubRow][4] = shotDistance; // update max if (clubs[clubRow][5]==0 || shotDistance > clubs[clubRow][5]) clubs[clubRow][5] = shotDistance; // save updated stats in local storage var str = JSON.stringify(clubs); localStorage.setItem("clubs", str); // redirect window.location.href = "clubList.html"; }
SLIDE 16
▪ If the user cancels then navigate
(redirect) back to list screen
16
// cancel, and return to clubList.html function cancelClub() { window.location.href = "clubList.html"; // redirect } // redirect from clubList.html to clubEntry.html if buton clicked function clubEntry(c) { localStorage.setItem("club", c); window.location.href = "clubEntry.html"; // redirect } // display the full name of the club on clubEntry.html screen function labelClub () { // populate label var clubRow = parseInt(localStorage.getItem('club')); var clubs = JSON.parse(localStorage.getItem('clubs')); document.getElementById('clubValLbl').innerHTML = clubs[clubRow][2]; // full name of club } function about() { window.location.href = "clubAbout.html"; // redirect }
SLIDE 17