What are you most proud of, and what would you do differently next time?

Frontend Mentor - Solución del componente de resumen de resultados

Esta es mi solución al desafío Results summary component de Frontend Mentor.

📖 Descripción general

El desafío

Los usuarios deben poder:

1. Ver el diseño óptimo según el tamaño de pantalla de su dispositivo.

2. Ver los estados de hover y focus en los elementos interactivos.

Bonus: Usar datos de un archivo JSON para cargar el contenido dinámicamente.

Screenshot

Vista de escritorio

Vista móvil

Descripción: Esta son las captura de pantalla de mi solución al desafío Results Summary Component. Muestra la vista de escritorio del componente, con un diseño limpio. Muestra la vista de mobile del componente, con un diseño responsive en todos los dispositivos.

Links

• Solution URL: Solucion
• Live Site URL: Sitio en Vivo

🛠️ Mi proceso

Tecnologias utilizadas

• HTML: Estructura semántica del componente.

• CSS: Estilos avanzados con Flexbox y gradientes.

• JavaScript: Uso de Fetch API para cargar datos dinámicos.

• Google Fonts: Fuente Hanken Grotesk para un diseño moderno.

• Styled Components - For styles

Lo que Aprendi

1. Diseño responsive: Usé media queries y un enfoque mobile-first para adaptar el diseño a diferentes dispositivos.

2. Manipulación del DOM: Aprendí a cargar datos dinámicos desde un archivo JSON.

To see how you can add code snippets, see below:

<div class="card light-red">
  <div class="card__info">
    <p class="card__text--title light-red"></p>
  </div>
  <div class="card__text">
    <p class="card__text--result"></p>
    <span class="card__text--objetivo">/ 100</span>
  </div>
</div>

const categories = document.querySelectorAll(".card__text--title");
const results = document.querySelectorAll(".card__text--result");
const cardInfos = document.querySelectorAll(".card__info");

fetch("./data.json")
  .then((response) => response.json())
  .then((data) => {
    data.forEach((item, index) => {
      if (categories[index] && results[index] && cardInfos[index]) {
        const img = document.createElement("img");
        img.src = item.icon;
        img.alt = item.category;

        cardInfos[index].insertBefore(img, categories[index]);

        categories[index].textContent = item.category;
        results[index].textContent = item.score;
      }
    });
  })
  .catch((error) => console.error("Error:", error));

Desarrollo futuro

En futuros proyectos, me gustaría profundizar en:

1. Accesibilidad: Mejorar la compatibilidad con lectores de pantalla y cumplir con WCAG.

2. Animaciones CSS: Añadir transiciones y efectos para mejorar la experiencia del usuario.

3. Testing: Implementar pruebas unitarias y de integración.

4. Optimización: Minificar y comprimir los archivos para mejorar el rendimiento.

👨‍💻 Autor

• GitHub - ImBenja
• Frontend Mentor - @ImBenja
• Instagram - @benjajuarez1_

🙏 Agradecimientos

Agradezco a Frontend Mentor por proporcionar este desafío y a la comunidad por su apoyo y feedback.