Today’s coding session was challenging. I was tasked with completing a function for each problem based on the given instructions. Although it was frustrating at times, I still found it enjoyable. Looking ahead, I am apprehensive about the upcoming projects. The instructions could be more specific, and I am concerned about my ability to write the entire code without significant assistance. I recognize that I will need much support and guidance to gain confidence in my coding skills.
The weekend was quite relaxing, as we didn’t have many plans, which was a nice change of pace. It’s essential to have some time to rest and recharge. On Sunday, we tackled some cleaning in the garage, and the kids had their chores to do as well. Karissa took it upon herself to clean and organize the pantry floor, which turned out to be a more significant task than she had anticipated, which was quite amusing.
Today has been a quiet day, and I ended up having a late lunch because I had a late breakfast. Oh! I also tried a 30-minute yoga class on Saturday night, longer than my usual 10-minute sessions. It was fun. I can’t believe Memorial Day is just a week away, signaling the impending arrival of summer. I have a love-hate relationship with the season due to the weather, but I look forward to it because my birthday is approaching. It’s always lovely to celebrate, even if it means getting older. Plus, Tommy and I will be the same age for a week. Time is flying by, and before we know it, we’ll be on a plane to Vancouver for our cruise to Alaska. I can’t wait for the adventure ahead.
Ok, you are reading both Part of Your World and Fourth Wing. In Part of Your World, we read both characters’ points of view. I’m not partial to stories with multiple points of view, but maybe this one won’t be too bad. It’s an opposite attract, age gap romance where two worlds collide. We do have a trigger in this story of domestic violence. So far, the author has dealt with this matter in a way that works and fits the overall storyline.
I’ve found Fourth Wing to be quite enjoyable thus far. While I have yet to delve deeply enough into the book to provide a comprehensive assessment, I’m drawn to its fantasy genre. I recall watching a few reviews of this book some time ago, though the details escape me now. However, I know Tommy is also reading it, and I need to catch up. Therefore, I plan to dedicate tonight to reading this book.
My laptop needs to restart for an update, which reminds me that I also need to update my watch. I paused my writing to check which devices require updates, and I’m currently in the process of updating all my Apple devices except for my laptop, which I’m still using. Perhaps I should let my laptop update and put my clothes away.
JavaScript notes…
——————————————
freeCodeCamp Rock,Paper,Scissors Game
Step 1
The first step is to build out the function that will generate a random choice for the computer.
The getRandomComputerResult function will be used to get the computer’s choice. Inside that function, you should see an options array with “Rock”, “Paper”, and “Scissors”.
Your task is to complete the getRandomComputerResult function so that it returns a random option from the options array.
Tips
You can use Math.random() and Math.floor() to help you get a random whole number. This will represent the index number for the options array.
You can use the random index to access the option from the options array.
function getRandomComputerResult() { const options = ["Rock", "Paper", "Scissors"]; const randomIndex = Math.floor(Math.random() * options.length); return options[randomIndex]; } console.log(getRandomComputerResult());
Step 2
In the game, there will be multiple rounds. The first to reach three points wins the game.
In this step, you will focus on determining if the player has won the round.
Complete the hasPlayerWonTheRound function. This function has two parameters: player and computer. The function should return true if the player has won the round, and false if the player has lost or tied the round.
Here are the criteria for the player to win a round:
If the player chooses “Rock” and the computer chooses “Scissors”
If the player chooses “Scissors” and the computer chooses “Paper”
If the player chooses “Paper” and the computer chooses “Rock”
A few function calls have been provided for you to test your function.
function hasPlayerWonTheRound(player, computer) { if ((player === "Rock" && computer === "Scissors") || (player === "Scissors" && computer === "Paper") || (player === "Paper" && computer === "Rock")) { return true; } else { return false; } } console.log(hasPlayerWonTheRound("Rock", "Scissors")); console.log(hasPlayerWonTheRound("Scissors", "Rock"));
Step 3
Now it is time to get the results of the round. Complete the getRoundResults function.
If the player wins the round, update the playerScore by 1 and return the message “Player wins! [player’s choice] beats [computer’s choice]”.
If the computer and player choose the same option, return the message “It’s a tie! Both chose [player’s choice]”.
If the computer wins the round, update the computerScore by 1 and return the message “Computer wins! [computer’s choice] beats [player’s choice]”.
[computer’s choice] should be replaced with computerResult while [player’s choice] should be replaced with the userOption.
Tips
Remember you can use the hasPlayerWonTheRound function to check if the player wins the round.
You can use template literals or regular string concatenation to build the message.
function getRoundResults(userOption) { const computerResult = getRandomComputerResult(); if (userOption === computerResult) { return `"It's a tie! Both chose ${userOption}"` } else if (hasPlayerWonTheRound(userOption, computerResult)) { playerScore++; return `"Player wins! ${userOption} beats ${computerResult}"` } else { computerScore++; return `"Computer wins! ${computerResult} beats ${userOption}"` } } console.log(getRoundResults("Rock")); console.log("Player Score: ", playerScore, "Computer Score: ", computerScore);
Step 4
Now it is time to update the scores and the round results message.
Complete the showResults function. The playerScoreSpanElement and computerScoreSpanElement should be updated to show the updated scores of the player and computer.
The roundResultsMsg should also be updated with the result of the round.
Tips
Remember that you learned how to work with the innerText property to update the text content of an element.
You can use the getRoundResults function to get the result of the round.
const playerScoreSpanElement = document.getElementById("player-score"); const computerScoreSpanElement = document.getElementById("computer-score"); const roundResultsMsg = document.getElementById("results-msg"); function showResults(userOption) { roundResultsMsg.innerText = getRoundResults(userOption); playerScoreSpanElement.innerText = playerScore; computerScoreSpanElement.innerText = computerScore; }; showResults("Rock");
Step 5
If you try to play the game, you will see that you can play for an infinite amount of rounds. But the rules state that the first one to three points wins.
Inside your showResults function, you will need to check if the player or computer has reached three points. If either has reached three points, you should display a message indicating the winner.
For example, if the player has won the game, then the winnerMsgElement should be updated to “Player has won the game!”. If the computer has won the game, then the winnerMsgElement should be updated to “Computer has won the game!”.
If there is a winner, you will want to show the resetGameBtn button and hide the optionsContainer so the player can play again.
Tips
You can use the el.style.display property to show the resetGameBtn button and hide the optionsContainer.
const playerScoreSpanElement = document.getElementById("player-score"); const computerScoreSpanElement = document.getElementById("computer-score"); const roundResultsMsg = document.getElementById("results-msg"); const winnerMsgElement = document.getElementById("winner-msg"); const optionsContainer = document.querySelector(".options-container"); const resetGameBtn = document.getElementById("reset-game-btn"); function showResults(userOption) { roundResultsMsg.innerText = getRoundResults(userOption); computerScoreSpanElement.innerText = computerScore; playerScoreSpanElement.innerText = playerScore; if (playerScore === 3 || computerScore === 3) { winnerMsgElement.innerText = `${playerScore === 3 ? "Player" : "Computer"} has won the game!`; optionsContainer.style.display = "none"; resetGameBtn.style.display = "block"; } };
Step 6
If the player or computer has won the game, there should be an option to reset the game and play again.
Complete the resetGame function that accomplishes the following:
Resets the player and computer scores to 0.
Updates the playerScoreSpanElement and computerScoreSpanElement to display the new scores.
Hides the resetGameBtn button.
Shows the optionsContainer so the player can play again.
Sets the roundResultsMsg and winnerMsgElement to empty strings.
Once you apply those changes, you will have completed the Rock, Paper, Scissors game!
function resetGame() { playerScore = 0; computerScore = 0; playerScoreSpanElement.innerText = "0"; computerScoreSpanElement.innerText = "0"; resetGameBtn.style.display = "none"; optionsContainer.style.display = "block"; roundResultsMsg.innerText = ""; winnerMsgElement.innerText = ""; };