Responsive Code Component Using HTML, CSS, and JavaScript
Design comparison
Solution retrospective
I used the below code within my function to apply the scores to the HTML elements. It works but i wanted to see if there another method I should have used?
Thank you and I appreciate any feedback!
//Apply the scores to the HTML elements:
if(scoreArray !== null){
reactionNum.innerText = scoreArray[0];
memoryNum.innerText = scoreArray[1];
verbalNum.innerText = scoreArray[2];
visualNum.innerText = scoreArray[3];
totalScore.innerText = Math.floor((
scoreArray[0] +
scoreArray[1] +
scoreArray[2] +
scoreArray[3]) / 4);
}
Community feedback
- @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 helpful0@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 - @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 helpful0@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 -
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord