Responsive Code Component Using HTML, CSS, and JavaScript

Hey Stacy!

The method you have used to apply the scores to the HTML elements looks perfectly fine. There are a few alternative methods you could use, but they may not necessarily be better than what you already have.

One alternative method is to use the textContent property instead of innerText. This is because textContent is faster and safer to use, especially when dealing with user-generated content or special characters.

Another alternative is to use a loop to iterate over the scoreArray and update the corresponding HTML elements. This may be useful if you have a large number of elements to update, but for the four elements you have in your code, the current method is perfectly fine.

Here is an example of how you could use a loop:

const scoreElements = [reactionNum, memoryNum, verbalNum, visualNum];
scoreArray.forEach((score, index) => {
  scoreElements[index].innerText = score;
});

totalScore.innerText = Math.floor(scoreArray.reduce((total, score) => total + score) / scoreArray.length);

In this example, we first create an array of the score elements to update. We then use forEach to loop over the scoreArray and update the corresponding element. Finally, we calculate the total score using reduce and update the totalScore element.

Hope this feedback helps!!

Hey there Stacy,

You can use a map() function instead for the scores.

• Make an array like const texts = [reactionNum, memoryNum, verbalNum, visualNum];

• scoreArray.map((score, index) => texts[index].innerText = score)

And for the total score you can use reducer() method.

• totalscore = (scoreArray.reducer( (accumulator, currentValue) => accumulator + currentValue, initialValue) ) / scoreArray.length

Dont forget to give initialValue a value of 0.

Hope you find this feedback helpful!