Happy Friday! I’m feeling a bit manic due to my bipolar disorder, but I’m trying to calm myself down with some hot tea. I ate lunch late. I didn’t feel very hungry today, but I should eat something.
My coding work went well today, but I did face some frustration while working on a problem related to classes. It took me almost an hour to figure out that I was missing a period. I usually find math-related problems challenging, but I enjoyed coding today.
Kel and I embarked on a culinary adventure today, trying out Starbucks’ new Spicy Lemonade. We were cautious, asking for a sample before committing. While the spice wasn’t overpowering, you could feel it in the back of our throats. We decided to go for a small size, and I found the overall experience quite semi-delightful.
We’re having Ranch Chicken, mashed potatoes, and veggies for dinner tonight. We’ll be cooking on the grill, which should be cool. The weather is warm today but windy. It’s supposed to be cool and windy this weekend. This reminds me that the pellet stove must be cleaned out since we need it this weekend.
JavaScript notes…
———————————-
FreeCodeCamp Dice Game steps 1 – 25
Step 1
In this project, you will learn algorithmic thinking by building a dice game. There are a total of 6 rounds and for each round, the player can roll the dice up to 3 times and collect a score.
The HTML and CSS have been provided for you. Feel free to explore them.
When you are ready, use the querySelectorAll() method to target all elements with the class of die, and assign that to a constant called listOfAllDice.
const listOfAllDice = document.querySelectorAll('.die');
Step 2
The next step is to select all of the elements responsible for displaying the scores.
Use the querySelectorAll() method to access all of the input elements inside the #score-options div element and assign that result to a constant called scoreInputs.
Then use the querySelectorAll() method to access all of the span elements inside the #score-options div element and assign that result to a constant called scoreSpans.
const scoreInputs = document.querySelectorAll('#score-options input');
const scoreSpans = document.querySelectorAll('#score-options span');
Step 3
Next, access the elements responsible for displaying the current round text.
Use getElementById() to access the element with the id of current-round and assign that to a constant called currentRoundText.
Then, use getElementById() to access the element with the id of current-round-rolls and assign that to a constant called currentRoundRollsText.
const currentRoundText = document.getElementById('current-round');
const currentRoundRollsText = document.getElementById('current-round-rolls');
Step 4
Next, access the elements responsible for displaying the score history and total text.
Use getElementById() to access the element with the id of total-score and assign that to a constant called totalScoreText.
Then, use getElementById() to access the element with the id of score-history and assign that to a constant called scoreHistory.
const totalScoreText = document.getElementById("total-score");
const scoreHistory = document.getElementById("score-history");
Step 5
Next, access the buttons that are responsible for keeping the score and rolling the dice.
Use getElementById() to access the element with the id of roll-dice-btn and assign that to a constant called rollDiceBtn.
Then, use getElementById() to access the element with the id of keep-score-btn and assign that to a constant called keepScoreBtn.
const rollDiceBtn = document.getElementById('roll-dice-btn');
const keepScoreBtn = document.getElementById('keep-score-btn');
Step 6
Next, you will need to access the container responsible for displaying the rules. You will also need to access the button responsible for showing and hiding the rules.
Use querySelector() to access the element with the class of rules-container and assign that to a constant called rulesContainer.
Then, use getElementById() to access the element with the id of rules-btn and assign that to a constant called rulesBtn.
const rulesContainer = document.querySelector('.rules-container');
const rulesBtn = document.getElementById('rules-btn');
Step 7
When the user clicks on the Show rules button, they should be able to toggle between showing and hiding the game rules.
Use let to create a variable called isModalShowing and assign it the value of false.
let isModalShowing = false;
Step 8
Each time the user rolls the dice, you will need to keep track of all of the dice values.
Use let to create a variable called diceValuesArr and assign it the value of an empty array.
let diceValuesArr = [];
Step 9
Throughout the game, you will need to keep track of the current score, total score, number of rolls and which round the player is on.
Use let to declare three variables named rolls, score, and totalScore and set all of their values to the number 0.
Then, use let to declare a variable named round and assign it the number 1.
let rolls = 0; let score = 0; let totalScore = 0; let round = 1;
Step 10
When the user clicks on the Show rules button, the rules for the game should display on the screen. When they click on the button again, the rules should be hidden. In the next few steps, you will build out the toggle functionality to show and hide the rules.
Start by using the addEventListener() method on the rulesBtn. For the first argument, pass in a click event and for the second argument pass in an empty arrow function.
rulesBtn.addEventListener('click', () => {
});
Step 11
Every time the user clicks on the rules button, the current boolean value for the isModalShowing variable should toggle between true and false.
Use the logical NOT operator(!) in front of your isModalShowing variable to invert the value and reassign that to the isModalShowing variable.
rulesBtn.addEventListener("click", () => {
isModalShowing = !isModalShowing;
});
Step 12
If isModalShowing is true, then you will need to show the rules and update the rulesBtn text.
Start by adding an if statement to check if isModalShowing is truthy. Inside your if statement, update the text content for the rulesBtn by assigning it the string value of Hide Rules.
Below that, update the display property for your rulesContainer by assigning it the string value of block.
if (isModalShowing) {
rulesBtn.textContent = "Hide Rules";
rulesContainer.style.display = "block";
}
Step 13
If isModalShowing is false, then you will need to hide the rules and update the rulesBtn text.
Below your if statement, add an else clause. Inside your else clause, update the text content for the rulesBtn by assigning it the string value of Show Rules.
Below that, update the display property for your rulesContainer by assigning it the string value of none.
Now you should be able to toggle rules button and see the rules been shown and hidden.
} else {
rulesBtn.textContent = "Show Rules";
rulesContainer.style.display = "none";
}
Step 14
When the user clicks on the Roll the dice button, five random die numbers should be generated and displayed on the screen. For the next few steps, you will build out this roll dice algorithm.
Start by creating an arrow function called rollDice.
const rollDice = () => {
}
Step 15
Each time the user rolls the dice, the list of previous dice values should be reset.
Inside your rollDice function, reassign an empty array to your diceValuesArr variable.
const rollDice = () => {
diceValuesArr = []
};
Step 16
When the user rolls the dice, you will need to generate 5 random numbers representing each die value.
To start, create a for loop that will loop a total of 5 times.
for (let i = 0; i < 5; i++) {
}
Step 17
For each iteration of the for loop, you will need to generate a random number that represents one of the six possible values found on a die.
Use Math.random() to generate a random number ranging between 1 and 6 inclusive. Make sure to round that result down to the nearest whole integer. Then assign the entire result to a const variable called randomDice.
const randomDice = Math.floor(Math.random() * 6) + 1;
Step 18
Next, push your randomDice value to the end of the diceValuesArr array.
const randomDice = Math.floor(Math.random() * 6) + 1;
diceValuesArr.push(randomDice);
Step 19
The next step is display the five random dice values on the screen.
Below your for loop, use the forEach method on the listOfAllDice variable to loop through each of the dice. For the callback function, use dice and index for the parameters.
listOfAllDice.forEach((dice, index) => {
});
Step 20
Inside your callback function, use the textContent property on the dice parameter and assign it the value of diceValuesArr[index].
dice.textContent = diceValuesArr[index];
Step 21
Now it is time to test out the rollDice function.
Add an addEventListener() method on the rollDiceBtn element and pass in a click event for the first argument and an empty arrow function for the second argument.
rollDiceBtn.addEventListener('click', () => {
});
Step 22
For each round in the game, users are allowed to roll the dice a maximum of three times.
Inside your callback function, add an if statement to check if rolls is strictly equal to the number 3.
If the condition is true, show an alert() to display the message You have made three rolls this round. Please select a score..
rollDiceBtn.addEventListener("click", () => {
if (rolls === 3) {
alert("You have made three rolls this round. Please select a score.");
}
});
Step 23
If the rolls limit has not been reached, then the user can still roll the dice in that round.
Add an else clause below your if statement. Inside the else clause, increment rolls by one and then call the rollDice function.
Now, you should be able to roll the dice and see 5 random die values show up on the screen.
} else {
rolls++;
rollDice();
}
Step 24
If you try to roll the dice a few times, you probably noticed that the rolls and round count do not change. To fix this, you will need to update the text content for both of those values.
Start by creating an arrow function called updateStats.
const updateStats = () => {
};
Step 25
Inside your updateStats function, update the text content for the currentRoundRollsText by assigning rolls to currentRoundRollsText.textContent.
Below that, update the text content for the currentRoundText by assigning round to currentRoundText.textContent.
const updateStats = () => {
currentRoundRollsText.textContent = rolls;
currentRoundText.textContent = round;
};
