determine the winner,too many "ifs" I feel a "switch" would've been the same. Obviously there is a lot to compare but is there a cleaner way? Also I see the box shadow is different, I couldn't get the correct colors! Overall great practice. feedback on how I can improve is appreciated.Thanks
Hi, good job on your solution. You are right that there are many if/elses. As you can see it gets confusing quickly :D. I would suggest using an extension called prettier in VScode, it can be setup to format on save. This will tremendously help code readability.
You can simplify your logic by making use of arrays and objects. Here's how I would do it. It is by no means the best way, could probably be even more concise and cleaner.
// Get player pick (this should be an input, not hardcoded)
const playerPick = 'rock';
// Get random pick for computer
const choices = ['rock', 'paper', 'scissor'];
const computerPick = choices[Math.floor(Math.random() * 3)];
// Declare the ruleset as an object for win conditions
// rock beats scissor
// paper beats rock
// sicssor beats paper
const rules = {
rock: 'scissor',
paper: 'rock',
scissor: 'paper',
};
// check if player won, lost or got a draw
const compare = () => {
if (playerPick === computerPick) return 'draw';
if (rules[playerPick] === computerPick) return 'win';
return 'lose';
};
console.log('playerPick', playerPick);
console.log('computerPick', computerPick);
console.log(compare());
It took me a loong ass time to finally finish this project. It was the most difficult i learn a lot. It not 100% accurate (I didnt know how to set up the background image). But hey, im still learning CSS. Its finally here! haha Happy New Year everyone.
I also take ages to complete these challenges. I look at the design and think, EASY, i'll be done in an hour...Then 6 hours later still not done haha.
Your css and images did not load properly due incorrect file paths. You can use ./ (current directory) instead of / (root directory).
In your index.html replace this:
<link rel="stylesheet" href="/styles/styles.css">with this:
<link rel="stylesheet" href="./styles/styles.css">Same thing for the images.
for more info check this out. https://stackoverflow.com/questions/7591240/what-does-dot-slash-refer-to-in-terms-of-an-html-file-path-location
cheers!
