JavaScriptDOM

Hello David!

You did a very good job there!

I have just one very simple suggestion for improvement:

• Since the button is a clickable element, it's nice to add cursor: pointer and the color shift effect.

This gives the user a visual indication that the element is clickable.

Other than that, you did a great job!

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!