Project 0 Feedback

[cameronjacoby]

Project Strengths

• Excellent use of percentages and arrays of player positions. This shows a strong understanding of CSS positioning and JS data structures, as well as creative problem-solving skills.
• The player animation and trophy icons to keep track of wins are fun, creative features that add a lot to the user experience.
• Nice use of the resetGame() function to keep your code DRY!
• Your code is very logical and easy to follow. You also did a great job semantically naming variables and functions to describe what they represent.
• Your JS code is well-commented, which helps other developers follow your logic.
• Amazing use of GitHub - the frequency and descriptiveness of commit messages help other developers follow your changes. Keep this up on all your projects!

  Growth Opportunities

• Indentation: Make sure you're using consistent indentation in your index.html and main.js files. This will make your code much more readable. Examples here and here.
• Tab-Spacing: Similar to indentation, consistent tab-spacing in all your files helps readability. You're using 2 spaces in index.html and main.js and 4 spaces in main.css. The standard is 2 spaces, so update main.css to match your other files.
• CSS Class Names: Some of your class names use dashes (e.g. .finish-line), while others are camel-case (e.g. .player1Name). Stick to one convention here for readability. I would pick the dashes, since Bootstrap's built-in class names use dashes.
• jQuery Event-Handlers: Refactor your .click() and .keypress() events to use the .on() syntax. .on() is better practice because is uses less memory and can be used for elements dynamically appended to the page. See this Stack Overflow post and the jQuery docs.
• Player Functionality: Player 1 and Player 2 have essentially the same functionality, so there are a couple places where it makes sense to use functions to DRY this up. Example: These two lines are repeated for Player 1 and Player 2, so you could have a function movePlayer(player) that takes care of increasing the player's position and animating the move in the view.
• Winner Execution: You have two if...else blocks to determine the winner, then check who that winner is to execute the win. Combine this functionality to avoid duplicate checks. Example: In the first if...else block, right after determining the winner and setting gameWinner, go ahead and display the win for that player, rather than having another check for the winner below.

[cameronjacoby]

@vframbach - I put together this feedback on your Project 0. We'll go over it in our 1:1 meeting this afternoon!