This document provides instructions for building a Tic Tac Toe game in JavaScript. It outlines the user story, format, and approach for the game. Key aspects covered include creating the game board using HTML elements, using variables to track game state, adding click listeners to the boxes, and checking for a winner with each move using arrays and loops. The document walks through implementing these pieces of functionality line-by-line in the starter code provided.

1. Build Tic Tac Toe in Javascript
March 2017
bit.ly/thinkful-tictactoe

2. About me
• David Coulter
• Frontend developer and product manager for 10 years at
National Geographic, NGP Van, Arcadia Power
• Mentor @ Thinkful

3. About us
Thinkful prepares students for web development &
data science jobs with 1-on-1 mentorship programs

4. Programming level (Javascript)
• First lines of code written tonight
• I’ve been coding for a couple months
• I’ve been coding for awhile

5. Notes for tonight
• Goal is to provide exposure to a more complex
challenge than we normally face as a beginner
• Beginner-friendly, but will be challenging if you’re
completely new to code
• You might only get the answer to one or two
challenges, but we’ll walk through every line of
code and learn through the exposure
• Don’t give up, try to struggle for the answer
• We’ll circulate and answer questions while we’re
working on challenges

6. Format for tonight
• Crash course on a concept
• See how it is implemented in the code
• Try a challenge in the starter code

7. User story
• Opens to a blank 3 x 3 grid
• Player 1 clicks on a square, fills in an “X”
• Player 2 clicks on another square, fills in an “O”
• Alert pops up when a player wins, restarts game
• If no one wins, alert pops up, restarts game

8. Creating the board

9. HTML overview
HTML elements usually consist of an opening tag, closing tag,
and some content. These elements also have attributes.
<table border=“1”> #html element starts here
<tr> #body element starts here
<td height=“50” width=“50”></td>
#this is an HTML element
</tr> #body element ends here
</table> #html element ends here

10. Starter code
• We’ve done this for you
• Everything from now on will be Javascript!
• JSFiddle: http://bit.ly/tic-tac-toe-starter-code

11. Note on different approaches
• There are many ways to solve complex coding
problems
• Your job is to consider trade-offs and choose the most
effective solution (the meaning of effective depends on
circumstances)
• As a beginner, your job is to make it work, and learn in
the process
• We’re going to cut through a lot of those tradeoffs and
make specific choices for how to design the program

12. Our approach
1 2 4
8 16 32
64 128 256
Each square is given a value so that if you add up any
combination of values, you’ll get a different number

13. Our approach
1 2 4
8 16 32
64 128 256
After each turn, we’ll add up the “score” for each player to
see if they win (i.e. add up to a winning number)
7
56
84
448
273
29214673

14. Javascript 101 — Variables
• A variable is a name that is attached to a value
• Gives us a shorthand way to refer to it elsewhere
• Can be string, number, boolean, objects, and arrays…
• Variables also help us manage state (turn = “X”)
var firstVariable = “hello world”;

15. Challenge: What variables do we need?
We’ll be using three main variables throughout the
program to “manage state”. What do we want to
remember for the whole program?
Can you figure out what these will need to be?

16. Answer
These variables track where players are in the game

17. Javascript Arrays
• With arrays we can store a list of items in a single variable
• We use “brackets” to refer to an array in our code
• The stored item can be a number, string, array, object, etc…
• Each array is “indexed” and starts with 0, then 1, etc
• var firstItem = wins[0] saves 5 to firstItem variable
• What will wins[2] return?
var wins = [5, 10, 15];

18. Challenge: Fill in “wins” variable
In your starter code, set the win variable to an array with
the list of winning scores

19. Answer
wins = [7, 56, 84, 73, 146, 273, 292, 448]

20. Adding a second array…
<td> <td> <td>
<td> <td> <td>
<td> <td> <td>
[<td>,<td>,<td>,<td>,<td>,<td>,<td>,<td>,<td>]

21. Javascript Functions
function doSomething () {
alert(“it’s done”);
};
doSomething();
A function lets you separate your code into bite-sized
pieces which you can use over again.
When you write a function to use later, you are
“declaring” it. When you use (or run) that function you
are “calling” it.

22. Javascript Functions — Parameters and Return
• You can also send a “parameter” to the function (the input)
• You can also “return” a value from the function (the output)
function doSomething (string) {
return string;
};
doSomething(“Hi”);

23. Challenge: “Call” the start new game function
In the init_game() function, call the the start new
game function (replace TODO in init_game)

24. Answer

25. What do we need to do inside start_new_game
• Set who goes first
• Reset the “number_of_moves” to 0
• Reset the scores (stored in scoreXO)
• Clear the boxes of any X’s and O’s
• Let’s do it together on the next slide

26. start_new_game

27. Adding click “listeners” to the boxes

28. Javascript “for” loops
• Used to run same code again and again with different values
• Parameter #1: Executed before the loop starts
• Parameter #2: Defines the condition for running the loop
• Parameter #3: Executed after the loop is done
• This loop will print “Javascript!” five times
for (var i = 0; i < 5; i++) {
console.log(“Javascript!”)
};

29. Javascript If/Else Statements
• Enables program to do different things based on conditions
• You can use if, else if or else
• If the statement in parentheses is true, it will execute that block
• Otherwise the program will move to the next block
if (turn == “O”) {
console.log(“It’s O’s turn”);
} else if (turn == “X”) {
console.log(“It’s X’s turn”);
} else {
console.log(“It’s no one’s turn”);
}

30. First For Loop when user clicks
“For” each square, we need to:
• Register that the click happened with a click event
• Get the number that’s attached to the square
• If it’s X’s turn, add to the score for X; if O’s turn, add to the score
for Y
• Add 1 to the number of moves
• Set the content of the square to show X or O
• Let’s walk through this

31. First For Loop

32. Question
After each move, what are the three possible outcomes?

33. Challenge (even trickier!)

34. Answer

35. Another challenge

36. Answer

37. Final challenge (maybe) — run the program!

38. Answer

39. Bonus! There’s more!

40. Bonus Solution

41. More about Thinkful
• Anyone who’s committed can learn to code
• 1-on-1 mentorship is the best way to learn
• Flexibility matters — learn anywhere, anytime

42. Our Program
You’ll learn concepts, practice with drills, and build capstone
projects for your own portfolio — all guided by a personal mentor

43. Our Mentors
Mentors have, on average, 10 years of experience

44. Our Results
Job Titles after GraduationMonths until Employed

45. Special Introductory Offer
• Two-week program, includes six mentor sessions for $50
• Starts with HTML/CSS/Javascript
• Option to continue into full web development bootcamp
• Talk to me (or email me) if you’re interested

46. October 2015
Questions?
dcoulter@thinkful.com
dan@thinkful.com
schedule a call through thinkful.com