Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Object-Oriented JavaScript: Challenge

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Rendering the Spaces, Board, and Tokens Solution

5:11 with Ashley Boucher

See the solution for rendering the Space, Board, and Token objects.

Jump to Solution Timestamps

1:40 - drawSVGSpace() solution
2:43 - drawHTMLBoard() solution
4:03 - drawHTMLToken() solution

Some Background on SVGs

SVG stands for Scalable Vector Graphics. MDN describes SVG as an XML-based markup language for describing two dimensional based vector graphics. It says “SVG is essentially to graphics what HTML is to text”. Essentially, SVG is a way to write, or describe, a graphic element in code. SVGs are great for displaying shapes on your website or app.

You might be wondering: why not just use CSS? Well, CSS can do a lot, for sure. But the reason SVGs are the right choice for this part of the app is because it offers the ability to clip and mask objects. On a real life “Four in a Row” board, the spaces that the tokens are dropped into are actually holes in the board. To recreate this “hole” effect in our game, we have to use SVGs masking capabilities.

For...of Loops

Check out the JavaScript Syntax Reference or the MDN documentation to learn more about for...of loops.

Code Correction

Line 17 in the drawSVGSpace() method in the Space.js file is unnecessary. Remember when I mentioned that apps often go through many iterations? Adding the data-column attribute to the SVG element was important in a previous iteration, but not used in the final project. Feel free to ignore it. Its presence doesn't anything, but you won't see it utilized in the rest of the course.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Hey again, Ashley here. 0:00
    Great job tackling the last three steps. 0:02
    My guess is that the idea of render methods was probably new to you. 0:04
    But don't worry, we'll go over the solution for these methods now. 0:08
    If you have any questions, hopefully I'll address them throughout this video. 0:11
    But if not, reach out to the Treehouse community. 0:15
    Working together with your fellow students not only gives you access to new 0:18
    perspectives, approaches and ideas, but 0:21
    when you help someone else you're reinforcing what you already know. 0:23
    Okay, you ready? 0:26
    For the next part of this video, 0:29
    we'll be going over the drawSVGSpace method solution. 0:31
    If you'd like to know a little more about SVGs before we dive into the solution, 0:35
    check the teacher's notes. 0:39
    Go ahead and open up the board.js file. 0:40
    Remember, when the board object gets created, 0:44
    its spaces property is initialized by calling the createSpaces method 0:46
    which generates an array of space objects. 0:51
    Each object in this array needs an associated space that we can see 0:54
    on screen. 0:58
    That's what the drawSVGSpace method is for. 0:59
    Let's switch now to the space.js file. 1:03
    Your first task was to add two properties to space classes constructor method, 1:08
    diameter and radius. 1:13
    Double check that your constructer method matches what you see on screen. 1:16
    The diameter property should be set to 76, and 1:20
    the radius property set equal to the diameter divided by 2. 1:23
    Doing it this way makes your code a little more dynamic and leaves less room for 1:27
    error, if you ever want to change the size of the board or spaces. 1:31
    Okay, now let's look at the method. 1:36
    This method doesn't receive any arguments nor does it return anything. 1:38
    The code was provided for you, so we'll move through this part pretty quickly. 1:42
    To be successful in this course, 1:46
    it's not important that you understand how the SVGs work. 1:47
    On the first line inside the method, a new SVG element is created and 1:51
    saved to a variable called svgSpace. 1:55
    On the seven subsequent lines, 1:58
    we set various attributes on the newly created svgSpace. 1:59
    First, the id attribute, set to the space object's id property value. 2:04
    Each of the following attributes is specific to SVG and 2:08
    deals with placement, size and color of the svgSpace. 2:11
    On the last line of the method we append the new svgSpace to the document, 2:16
    thereby showing it on screen. 2:21
    Pause here to double check that your code matches what's on screen and 2:24
    what was provided in the previous step, then we'll move on. 2:27
    Okay, let's look at the drawHTMLBoard method next. 2:32
    Head back to board.js. 2:36
    If you recall, 2:38
    the board objects spaces property is holding the 2D array of space objects. 2:39
    Your objective for this step was to loop through this array and 2:44
    call the drawSVGSpace method we just reviewed on each space object. 2:47
    How did you tackle this loop? 2:53
    There's a few ways you could approach this, but 2:56
    I chose to use the for of method. 2:57
    In this context you can think of for of loop syntax as saying for 3:00
    each element of an array. 3:04
    To learn more about the syntax and how for of loops work, check the teacher's notes. 3:06
    If it helps, visualize the array as the game board. 3:11
    Each element of the array is a column on the board 3:15
    holding an array of space objects. 3:17
    The outer for of loop iterates over each column. 3:20
    The inner for off loop iterates over each space object inside the column. 3:23
    Inside the inner loop we have access to the space object and 3:28
    can call the method on it. 3:31
    Go ahead and match your code to what you see on screen. 3:34
    If you used a different array iteration method, that's totally fine, 3:36
    no need to change it. 3:39
    Just make sure the outcome of your method is the same. 3:40
    If you're unsure, don't hesitate to discuss your solution with other 3:43
    students taking the course and circle back. 3:46
    Okay, on to the final render method. 3:50
    Navigate to your token.js file to look at your solution to the drawHTMLToken method. 3:52
    How does it compare to what you see on screen? 4:02
    If you aren't very familiar with dom scripting or 4:04
    had to look up some solutions here, that's totally okay. 4:07
    We'll walk through the solution now. 4:09
    On the first line inside the method, we create a new div element and 4:12
    save it to a variable token. 4:15
    The second line of this method appends our new token element to the existing HTML 4:18
    element game-board-underlay, found in index.html. 4:22
    The third and fourth lines set class and id attributes on the new element. 4:27
    Note that I'm using this.id to access the value of the token object's id property, 4:32
    and pass it as the value for the id attribute of the element we're creating. 4:38
    Finally, the color of the token is set using the token owner's 4:43
    color property value. 4:47
    Notice the double dot notation here. 4:49
    This is how you access properties or 4:51
    methods of objects that are stored inside properties of other objects. 4:53
    The token object has a property called owner that's holding a player object. 4:57
    Any of that player object's properties or methods can be accessed 5:02
    inside the token class by using this.owner.property or method name. 5:05

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up