Results Summary Component Hecho con HTML, CSS y JS con JSON

What are you most proud of, and what would you do differently next time? 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.

Screenshot

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

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.

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