Back to Shut the Box Project

Shut the Box Project - JS CSS and HTML updates

Additional Scripts Three

Instructions:

Although this is the the third update to scripts, we need to make changes in multiple places on the CSS and HTML files as well. Let's start with our JS file. Copy and Paste our new getScore() function at the bottom of our stbScripts.js file. Also, call out our new function by typing in getScore() at the end of our select(obj) function. Make sure it is before the close brace symbol and not after it! We also need to add score to our variable list at the top of the JS file.

    // get the current score, make sure we add 'score' to var list at top!
function getScore() {
    score=0;
    
    //loops through array and adds each element
    for (var i = 0; i < currentTiles.length; i++) {
        score += currentTiles[i];
    };

    //place the score in a paragraph with jquery command
    $("#score").text(score);
};
            

Instructions for HTML and CSS:

We need to add a new div to hold our score. Later we will want a player two score, but for now, just one player score will due. Copy and paste this div block of code below into the HTML file immediately after the div id="leftside" so the score will sit below the roll button. Then, copy and paste the styles for this div below (scoreboard) to the bottom of the stbStyles.css file.

        <!-- player's scores will be in this div -->
        <div id="scoreboard">
            <p>Score: <span id="score">45<span></p>
        </div>

//styles for scoreboard
#scoreboard {
    position: relative;
    margin-left: 100px;
    width: 300px;   
    color: white;
    background-color: black;
}
            
David Johns and Electric Teaching ~ All Rights Reserved 2015