Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
See the solution for connecting the objects to the DOM
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Hi, again.
0:00
Before we get started, make sure you've
opened up your app.js and game.js files.
0:01
Let's start with app.js.
0:06
This file is where we'll listen for
user triggered events,
0:08
like if a player clicks their mouse or
presses a key.
0:11
These event handlers will prompt
responses from our objects.
0:14
Up until now, our game has existed
without a connection to the DOM.
0:18
It can't be seen on the screen or
interacted with.
0:22
Our app.js file is the bridge between
the visual aspect of the game,
0:25
the HTML and css, and
the objects we've created so far.
0:29
Inside the HTML for the game, there is
a button element with the id begin game.
0:33
The game should begin when
this button is clicked.
0:38
As outlined in this assignment
in the previous step,
0:41
this requires three different
actions on your part.
0:44
Create the game object, write a start
game method on the game class, and
0:46
call this method inside
the click event handler.
0:51
So first, let's create the new
game object in the app.js file.
0:54
Next, you are asked to create an empty
method in the game.js file called
1:04
start game.
1:08
Let's move over to game.js and
make some space to declare the method.
1:09
Let's not forget to document it.
1:19
Since this method doesn't receive
any arguments or return anything,
1:21
the only documentation that's needed
is a short description of the method.
1:24
This way,
1:28
anyone reading your code would be able to
quickly ascertain what this method does.
1:29
Okay, that's all we'll do for now.
1:42
As we move forward with
the development of this app,
1:44
a few things will happen
inside this method.
1:46
But let's not get ahead of ourselves.
1:48
For now, let's head back to app.js and
1:50
finish connecting the begin
game button to the game files.
1:52
The HTML id attribute for
the button is begin game.
1:57
Let's grab this element using the dom
object method getElementById.
2:01
Then, we'll call the dom method
addEventListener on the element,
2:09
pass in the argument click to tell it
we're listening for a click event.
2:13
And then,
pass in the callback function, or
2:17
the function that's executed
after this click event.
2:20
All we have to do inside the callback
function is call our newly created
2:23
startGame method on the game object that
we initialized at the top of this file.
2:27
Of course, if a user were to
click the begin-game button now,
2:31
nothing would happen.
2:34
The startGame method is empty.
2:35
That method will be filled out
by the end of the stage, but
2:37
we have some other work to do before then.
2:40
Inside this callback function, we also
need to add in the dom scripts to show
2:42
the board and first token after
the beginGame button is clicked.
2:46
That code was provided in
the previous instruction step.
2:50
Just double check that you've included
it inside the callback function here.
2:53
I'll copy and paste it in.
2:57
Okay, take a moment to make sure your
solution matches what you see on screen.
3:00
If you have any questions, don't hesitate
to reach out in the Tree House Community.
3:05
Once your code is squared up,
3:09
it's time to start putting together
a visual representation of the game.
3:11
So in the next three instructions steps,
3:14
you're going to be writing
what I call render methods.
3:16
Talk to you soon.
3:19
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up