console.log(`Computer chose ${computerChoice}`);
It's cleaner that you remove console logs on submission, as console logs are used for your own debugging purposes. Not for users to see.
30 Matching Annotations
- Jun 2022
-
github.com github.com
-
-
I think you've shown great potential here in JS. and I can only fault you by syntax preferences. The only pointer I can give you is to read up on this js coding convention called ESLint, more specifically the airbnb convention and approach of doing javascript.
Super great attempt on this project and I am super excited to see all your future projects!
-
function updateUI(humanScore, computerScore, roundsLeft) {
I don't think you need to put in any parameters for this function. humanScore, computerScore and roundsLeft are global variables, and you can access it without feeding it as a parameter.
-
switch (winner)
Great use of the switch case here!
-
roundsLeft--;
This works. But this kind of syntax (-- and ++) is generally not preferred in javascript. += 1 and -= 1 is much more preffered.
-
const winner = winnerTable[humanChoice][computerChoice];
great way of using objects to take results! Although this syntax of accessing objects is not usually preferred. Generally objects are accessed in terms of object.outerKey.innerKey format. But in your case, I don't think I can find any other way of accessing the values in your object.
-
for (const choice of choices)
Great use of newer syntax of for(... of...). Although this works, it's not much preferred.
the more preferred syntax in this case is a forEach function, something like: choices.forEach((choice) => { // function })
-
"click", () => playGame(choice)
great use of anonymous arrow function, I don't know if you've tried, but I am quite positive that you can't just do something like .addEventListener('click', playGame(choice)) because it will just auto-run the function.
you can do somehing like playGame.bind(choice), but generally, your method of doing it is much preferred.
-
setupListeners();
It's not recommended to use a function before it's declared, as it may give your code some errors!
-
const choices = ["rock", "paper", "scissors"];
ES 6 syntax! You're more familiar with newer javascript! This is great!
-
const winnerTable = { rock: { rock: "tie", paper: "computer", scissors: "human", }, paper: { rock: "human", paper: "tie", scissors: "computer", }, scissors: { rock: "computer", paper: "human", scissors: "tie", }, };
This is a very novel use of objects! I'd have never thought this way to compare values.
-
-
github.com github.com
-
This HTML code is very high level for a basics student! Great job! Some pointers here:
- In this case, I think it's better to separate your css into another file. Link it to your html afterwards.
- I like how you're using grid! Maybe learn flex boxes too! It could make your css styling easier. Once you've learnt what flex boxes are, you'd never want display: block/inline-block ever again.
- if you ever want extra challenge, do read up on bootstrap! That would actually make css stylings SUPER easy. You don't even need to define breakpoints for smaller screens too! Bootstrap will take care of everything for you!
- Also, if you're really keen on doing css-based animations, do read up on animate.css as well! It's something that's pre-defined and it saves you all the hassle of doing great animations on your own.
I'm really excited for your upcoming projects now! You seem to be super comfortable in html/css! If possible, no more pink box and white bg please!
-
/* @media (max-width: 500px) { #container { margin: 0 auto; padding: 5px; display: block; max-width: 200px; } } */
You tried to make this things responsive too! This is great, buddy!
-
* { box-sizing: border-box; } body { font-family: sans-serif; } #header { text-align: center; } #container { background-color: pink; margin: 40px auto; max-width: 800px; padding: 38px 31px; } #output-div { background-color: lightgrey; justify-content: center; padding: 20px; width: 100%; } .selections { justify-content: center; display: flex; } #rock, #paper, #scissors { background: none; outline: none; border: none; cursor: pointer; font-size: 50px; transition: 80ms; } .selections > *:hover { transform: scale(1.3); } .results { justify-content: center; display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; align-items: center; font-size: 40px; font-family: sans-serif; } .result { font-size: 25px; } .rounds { font-size: 20px; } .past-results-player { float: left; padding: 38px 300px; opacity: 0.5; font-size: 50px; } .past-results-computer { float: right; padding: 38px 300px; opacity: 0.5; font-size: 50px; }
Love all these custom CSS! I don't think I see any .past-results-player/computer class? But I like that you are trying to do things!
-
-
github.com github.com
-
A solid attempt at your first project! Here are a few pointers:
- I know that you've struggled quite a bit in getting this up and running. I think you just need more practice in JS. Try going back to any exercise that you might not have been super comfortable with (like say, functions in this project) and re-doing them on your own. This should help your understanding of javascript more!
- Maybe it's easier that you do your pseudocode before you attempt coding this out. It will help you map out what you want and need to be done. You might need to be fairly specific about it. So something like --check whether player win-- is not recommended, and something like --check if player has scissors and computer has paper, player win if condition met--- is more recommended.
- I like how you want to make it the most comfortable version, I can give you some pointers on how you can make that happen, and if you still want to experiment with this code, feel free to do so!
- You're very close to implementing the win/draw/lose percentage. What you can do is to add a counter on how many times you've played the game, and divide the win/draw/lose amt to that counter.
- for reverse game mode / korean sps - You can add more game states, or new win/lose checking for all the reversed / korean sps game states. Granted the korean sps is very hard to implement, only very few people in all of the basics batches successfully do it.
- you can also add a new game mode for computers! if you want to do so! It's basically just 2 random rolls and check it against one another.
I know that you can do what needs to be done on the next project! It might be hard but keep working on it, if you don't understand a concept, do look at and re-do your pre-class/in-class exercises! I'm looking forward to see your project 2 submission!
-
var outputWinLossMessage = function () { return ( "<br>" + userName + ": " + numPlayerWins + " | Computer: " + numAIWins + " | Draws: " ); };
it's nice that you have another helper function here! But you have not used it. you can call this function to format your return!
-
if (inputTrim != "scissors" && inputTrim != "paper" && inputTrim != "stone") { //informs user to enter a valid input return 'Your input is invalid. Please enter either "scissors", "paper", "stone".'; }
nice error checking here! you're trimming and lowercasing all strings and checked it here.
In this case it might be better to use the global value you've set before like:
if(inputTrim != SCISSORS && ...)
as opposed to using a string to compare this.
-
playerChoice = input;
You forgot to declare your variable here! JS is being nice and still allows it, but this will break on older computers and/or browsers.
-
//Generating computer AI's option randomly var generateRockPaperScissorsOption = function () { var randomNumber = Math.floor(Math.random() * 3); if (randomNumber == 0) { return STONE; } if (randomNumber == 1) { return PAPER; } return SCISSORS; }; //Helper funtion for userWinAi conditions var userWinAi = function (inputTrim, aiChoice) { return ( (inputTrim == SCISSORS && aiChoice == PAPER) || (inputTrim == PAPER && aiChoice == STONE) || (inputTrim == STONE && aiChoice == SCISSORS) ); };
Great use of helper functions to spread the logic of your code!
-
if (!userName) { if (!name) { return "Please input name!"; } userName = name; return "Welcome, " + userName; }
nice mode switching and input validation!
-
// Objects var SCISSORS = "scissors"; var PAPER = "paper"; var STONE = "stone"; // Players var AI = "ai"; // ---Outcomes--- var WIN = "You win"; var LOST = "You lost"; var DRAW = "You draw";
It's good that you're assigning constants on the top of the page! It's a great fail-safe for typos in your app.
Although I don't think you're using the AI variable in any of your code
-
-
github.com github.com
-
<input id="name-field" />
Not a lot of people I know in basics do add a new input on their first project! Good job!
-
<h1 id="header">Scissors ✂️ Paper 📄 Stone 💎</h1>
I like how you're playing around with the HTML!
-
-
github.com github.com
-
Great attempt at your first project! A couple of pointers:
- Usually we remove console logs when we submit projects, because console logs are just to help you debug your own code, and the end user will not see it.
- Variable names and function names are clear! Nice going!
- Great job for making the game run!
- This is personal preference for readability, but there are two varying opinions for returns in a function: single returns (only 1 return per each function) and multiple early returns (you can have a lot of returns in a function). Rocket (and I personally) follow multiple return conventions, but I will not criticize people who does single returns. If - else if - else syntax (lines 42-55) is usually paired with single return convention. if - if - if syntax (lines 16-24) is usually paired with multiple return convention. It's best practice to take one convention and stick with it, for the sake of readability, rather than changing conventions back and forth. This is just a "nice to know" bit, don't need to really stress over this.
Overall, great attempt for this project! I'm looking forward to your submissions for the upcoming projects!
-
else {
line 52 already has a return, so else is not really necessary here.
-
else if (input == computerChoice) {
line 49 already has a return, so else is not really necessary here.
-
totalPlays += 1;
I think we can refactor this.
If you're adding totalPlays += 1 to player win, draw and player lose, it's the same as totalPlays += 1 to all cases, and so you can add this before you go to the if/else if/ else statements.
-
computerChoice = generateRockScissorsPapers();
Javascript is being kind to you, because this technically did not break your game. But you need to declare this variable with var!
It's not global and it's never been declared before.
-
var generateRockScissorsPapers = function ()
It's nice that you've separated this into a helper function! Good job!
-
if (randomNumber == 2) {
theoretically you wouldn't need the if block here, because in this case, the value of the random number can only be 0, 1, and 2. if it's not 0 or 1, then it's always going to be 2.
But it's good you've added this, this makes it more clear!
-