Responsive results card made with Flexbox, Tailwind & JS

Community feedback

• 

  Giovanni Ruberto•260

  @RabberpoliPosted over 1 year ago

  Hi! Congrats on completing this challenge! You did a really good job! Back to your question, it is possible to render your results dinamically using JS. I try to explain one of the multiple solutions you can develop:

  const scores = [ ]; // here you can put your score objects
  
  scores.foreach(score => {
     const categoryId = score.category + ‘-score’; // Here I’m creating the Id of the HTML element I have to modify
  
     const categoryHtmlElement = document.getElementById(categoryId);
     categoryHtmlElement.innerText = score.score;
  });
  
  

  This should give the desired output.

  Let me know if it can be useful! Keep going and happy coding!

  Marked as helpful

  0

  ---

  

  David H.•40

  @DavidDHDHPosted over 1 year ago

  Thanks @Rabberpoli ! forEach is the thing ! I managed to redo it my way and incorporated a average score calculation.

  const result = document.getElementById('moyenne')
  const notes = scores.map(score => score.score)
  
  // Individuals score display
  
  scores.forEach(score => {
      const idElem = score.category
      document.getElementById(idElem).innerHTML = score.score
  })
  
  // average score calculation and display
  
  const moyenne = (notes) => {
    let sum = 0;
    let count = 0;
    for (var note of notes) {
      sum = sum + note;
      count++;
    }
    return sum / count;
  };
  
  const res = Math.round(moyenne(notes))
  result.textContent = res
  

  1