Responsive Code Component Using HTML, CSS, and JavaScript

Community feedback

• 

  Ayman Shakil•270

  @Ayman-Shakil192Posted over 1 year ago

  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!!

  Marked as helpful

  0

  ---

  

  P

  Stacy Riley•110

  @Stacy-RileyPosted over 1 year ago

  @Ayman-Shakil192

  Thank you for taking the time to share this feedback. I'm going to read more about these methods and add them to my JS "toolbox!"

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  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!

  Marked as helpful

  0

  ---

  

  P

  Stacy Riley•110

  @Stacy-RileyPosted over 1 year ago

  @visualdenniss

  Thank you for your feedback. It gives me some new tools to read about and start using!

  0