abeytaadam / good-meowning Goto Github PK

Project Strengths

• So creative!! The cat theme really makes this project stand out. 😸
• Strong UX and UI that supports the theme and makes the game fun to play!
• Your code is well-indented, well-commented, logical, and easy to follow. 👍
• Great use of functions to keep your code DRY. I'm especially impressed with the handleTimer() helper function you used for the countdown.
• Excellent logic around successive keypresses, and I like that it makes the game more challenging to play.

Growth Opportunities

• CSS Organization:

  • It looks like there are CSS files you're not using (specimen_files). Remove any files you don't end up using so other developers don't waste time figuring out what they're being used for. (There's also a stylesheet.css.zip that you can remove as well.)
  • Remember to always require your custom stylesheet AFTER you require Bootstrap in case you want to override any of Bootstrap's default styles. It doesn't look like it's affecting your styles here, but it's best practice to move your stylesheet after Bootstrap just in case.
  • Make a separate folder inside CSS called fonts to hold your custom fonts.
  • Define your @font-face at the top of your stylesheet instead of at the bottom.

• Folder Names: It's best practice to name your folders in lowercase. Change CSS to css and IMGs to images.

• Tab Spacing: Consistent tab-spacing in all your files helps readability. You're using 2 spaces in index.html and main.js and 4 spaces in stylesheet.css. The standard is 2 spaces, so update stylesheet.css to match your other files.

• GitHub Commits: For your next project, try more frequent and descriptive commit messages. Looking at your first commit, you could've split out CSS into a commit of its own, then broken down the "game functionality started" into several commits (3-4), each one describing which part of the game functionality was implemented.

• Global Variables: Nice job recognizing you need to refactor your global variables! Try representing your players as objects:

  var player1 = {
    countA: 0,
    countS: 0,
    countD: 0,
    countF: 0
  }

  This turns 8 global variables into 2. You can also store page elements related to your players on this object, which prevents selecting elements more than once (bad for memory):

  var player1 = {
    countA: 0,
    countS: 0,
    countD: 0,
    countF: 0,
    gameBox: $('#gb1'),
    cat: $('#p1')
  }

• Refactor Vanilla JS: I see why you're using Vanilla JS to use the .src() method. Since you're using jQuery in other parts of your app though, it's best to keep it consistent. Try somthing like $('#p1').attr('src', 'IMGs/sleepyCat2.gif'), or even player1.cat.attr('src', 'IMGs/sleepyCat2.gif')!!

• 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 lines are repeated for Player 1 and Player 2, so you could have a function wakeUpCat(player) that takes care of checking the keypress counts and changing the cat gif.