All comments

@DavidMachioSubmitted 11 months ago

He practicado JavaScriptDOM, recuperando los elementos por id, también convertí el data.json en un data.js, y cree una función que pasándole cualquier data, devolverá la media de los valores.

JavaScriptDOM

Youness Bouallala•10

@bunessPosted 11 months ago

Hi @DavidMachio,

Great job!

Here are some suggestions for the JavaScript code:

Instead of fetching each category individually, consider fetching them all using a common class or a data attribute. For example:

HTML
<div class="date category1" data-category>...</div>

JS
const categories = document.querySelectorAll('[data-category]');

Modify the code to dynamically fill each category using a loop:

persona.forEach((p, i) => {
  const currCategory = categories[i];
  const icon = currCategory.querySelector('[data-icon]');
  icon.src = p.icon;
  icon.alt = p.category;
  currCategory.querySelector('[data-title]').textContent = p.category;
  currCategory.querySelector('[data-score]').textContent = p.score;
});

Ensure the number of categories in HTML matches the number in data.js, or dynamically create elements if needed:

HTML
<article class="dates" data-categories>...</article>

JS
const categoriesContainer = document.querySelector('[data-categories]');

persona.forEach((p) => {
  ...
  categoriesContainer.innerHTML += `
    <div class="date category1">
    <div class="datename">
      <img src="${p.icon}" alt="Icono ${p.category}" />
      <h3 class="textcategory1">${p.category}</h3>
    </div>
    <div class="value-date">
      <h3 class="value">${p.score}</h3>
      <h3 class="total">/ 100</h3>
    </div>
  </div>
});

When using a ternary operator to assign a value to a variable, consider assigning the result directly, like this:

JS
mensaje.textContent = valorMedio <= 90 ? 'You scored higher than 65% of the people who have taken these tests.' : 'You lose';

I hope it helps!

Great job overall!