Today’s coding session was a mixed bag. I managed most of it on my own, with just a few hiccups that required some clarification. The for-of loops, however, continue to be my nemesis, throwing me off track every now and then.
Karissa found Merlin’s tennis ball, which he’d been playing with all day. It’s still pretty windy outside, but it’s warmer today. Oh, I have nothing much to write about today.
Chris called this morning. Protesters at his school raided one of the buildings last night. This is so messed up. Protest as you must, but do it peacefully. When it starts getting destructive, that is where they cross the line. He said he may come home next week to feel safe as his finals are online. What is messed up is that it isn’t just students at that protest. So, we have non-students trespassing onto the campus. They made a makeshift homeless camp on campus. This makes the school unsafe. There aren’t any protesters at Lexi’s school. Tommy said that it’s less likely. I talked to Lexi earlier, also. I’m glad to hear that.
Unfortunately, I seem to have caught a cold. My head feels heavy and congested, and a persistent headache is making it hard to concentrate. My throat is sore, and I’m feeling quite miserable. On the bright side, this gives me a perfect excuse to indulge in more hot tea, not that I really need one.
JavaScript notes…
———————————-
FreeCodeCamp Dice Game steps 46 – 60
Step 46
Now it is time to see the result of your getHighestDuplicates function.
Inside the else clause of the rollDiceBtn callback function, call the getHighestDuplicates function and pass in diceValuesArr for the argument.
Try rolling the dice a few times to see if you can get a “Three of a kind”, “Four of a kind”, or “None of the above”.
getHighestDuplicates(diceValuesArr)
Step 47
Before each dice roll, you will need to reset the values for the score inputs and spans so a new value can be displayed.
Start by creating an arrow function called resetRadioOption.
const resetRadioOption = () => {}
Step 48
For each of the score inputs, you will need to disable the input and remove its checked attribute.
Start by using a forEach on the scoreInputs. For the callback function, use input for the parameter name.
const resetRadioOption = () => {
scoreInputs.forEach((input) => {})
};
Step 49
Inside your callback function, set the input’s disabled property to true and the checked property to false.
const resetRadioOption = () => {
scoreInputs.forEach((input) => {
input.disabled = true;
input.checked = false;
});
};
Step 50
For each of the score span elements, you will need to reset the text content.
Start by adding a forEach to your scoreSpans variable. For the callback function, use span for the parameter name.
Inside the callback function, set text content for each span to an empty string.
scoreSpans.forEach((span) => {
span.textContent = ""
})
Step 51
To see the results of your resetRadioOption function, you will need to call the function inside the rollDiceBtn callback function.
Now, try rolling the dice again and you should see that the previous score inputs and spans reset before each new roll.
resetRadioOption()
Step 52
When you roll the dice and make a selection, you are not able to keep the score you selected and move onto the next round. In the next few steps, you will build out an algorithm that keeps track of and displays each score for all six rounds of the game.
Start by creating an arrow function called updateScore that has two parameters called selectedValue and achieved.
const updateScore = (selectedValue, achieved) => {
}
Step 53
The selectedValue parameter represents the option the user chose during that round.
To update the score, you will need to use the += compound assignment operator to add the selectedValue to the totalScore. Make sure to wrap your selectedValue parameter inside a parseInt since this string value needs to be converted to an integer.
const updateScore = (selectedValue, achieved) => {
totalScore += parseInt(selectedValue)
};
Step 54
Next, set the text content of totalScoreText to the value of totalScore.
Below that, append the following template literal to the scoreHistory element’s HTML:
.
const updateScore = (selectedValue, achieved) => {
totalScore += parseInt(selectedValue);
totalScoreText.textContent = totalScore;
scoreHistory.innerHTML += `Step 55
After a user makes a selection, they should be able to keep that score and move onto the next round.
Add an event listener to your keepScoreBtn variable that takes in a click event for the first argument and an empty arrow function for the second argument.
keepScoreBtn.addEventListener("click", () => {})
Step 56
When a radio button is checked, you will need to save its value and id.
Inside your event listener function, create two let variables called selectedValue, and achieved.
keepScoreBtn.addEventListener("click", () => {
let selectedValue
let achieved
});
Step 57
To figure out which selection was made, you will need to loop through each radio button to see which one has the checked attribute.
Use a for…of loop to loop through each of the scoreInputs. The variable name for the for…of loop should be called radioButton.
keepScoreBtn.addEventListener("click", () => {
let selectedValue;
let achieved;
for (const radioButton of scoreInputs) {
}
});
Step 58
If the current radio button inside the loop has the checked attribute, then you will need to get its value and id.
Add an if statement inside your for…loop, with a condition of radioButton.checked.
Inside your if statement, assign radioButton.value to selectedValue and assign radioButton.id to achieved.
At the bottom of your if statement, add the break keyword to ensure that you break out of the loop when the selected radio button was found.
for (const radioButton of scoreInputs) {
if (radioButton.checked) {
selectedValue = radioButton.value;
achieved = radioButton.id;
}
break;
}
Step 59
If the user makes a selection, then the rounds, rolls and scores should be updated.
Add an if statement, to check if selectedValue is truthy. If so, reassign the number 0 to rolls and increment round by 1.
Then, call the updateStats and resetRadioOption functions. And lastly, call the updateScore function and pass in selectedValue and achieved for the arguments.
Now you should be able to roll the dice, make a selection keep a score and have the score display under the score history.
if (selectedValue) {
rolls = 0;
round++;
updateStats();
resetRadioOption();
updateScore(selectedValue, achieved);
}
Step 60
If you try to click on the keep score button without making a selection, then nothing happens.
To fix this, add an else clause to your if statement, and place an alert inside. For your alert, use the following message: “Please select an option or roll the dice”.
} else {
alert("Please select an option or roll the dice");
}
