Web Applications Workshop

Welcome to the WiCS Web Applications workshop! We'll be going through basic HTML, CSS, and Javascript so that you'll be able to to code your own working Tic Tac Toe web app.

Adding functionality to tic-tac-toe.js

1. Download the starter files using the links to the right.
2. You're given the function (.check) that determines whether a Board is currently in a winning, losing, or draw state. This function should be called after each turn.
3. Change the callback function (.handleClick) so that the correct letter (an X or an O) is drawn in the clicked cell. Also change the status box to a helpful message.
4. Add a function that pops up the appropriate alert depending on whether the player has lost or won or if the game was a tie. Call the function in the .check function.
5. Write a function called .clearBoard that sets all of the board's cells to empty. Call the function at the end of the game.
6. Create a button that allows you to restart the game and calles .clearBoard.

Useful JQuery functions:

• $ → gets an element by the appropriate selector (# for IDs or . for classes)
• .html → changes the inner HTML of an object
• console.log(message) → brings up a message in the console
• .click(function(){...}); → handles click on object by calling the passed in function

Uploading your code to Stanford AFS

1. Go to afs.stanford.edu.
2. Click on the afs.stanford.edu link on the left-hand side.
3. Click on the WWW folder.
4. On the left, click Upload File(s).
5. Upload your files!
6. Your webpage will be found at stanford.edu/~SUNetID/filename, where SUNetID is your ID, and filename is the name of the file you want to view.

Other Resources

• Empty website template: https://html5boilerplate.com
• CSS functionality: http://getbootstrap.com
• More on JavaScript/JQuery:
  • http://www.w3schools.com/js/js_intro.asp
  • http://jquery.com
• CS 42: http://callbackjs.me