JavaScriptDOM

Community feedback

• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 11 months ago

  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!

  Marked as helpful

  0

  ---

  

  David Machio•110

  @DavidMachioPosted 11 months ago

  do it ... Thanks@danielmrz-dev

  0
• 

  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!

  0