Stats Component Hecha con HTML, CSS y JS con JSON y manejo de DOM

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

Frontend Mentor - Stats preview card component solution

Esta es mi solución al desafío Stats preview card component solution de Frontend Mentor. Los desafíos de Frontend Mentor te ayudan a mejorar tus habilidades de codificación mediante la construcción de proyectos realistas.

📖 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 datos dinamicamente almacenados en el archivo data.json

3. Ver los diseños de Flexbox y los efectos de hover.

Bonus: Use datos de dos archivos .JSON para alternar un cambio de idiomas ya sea Español o Ingles.

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.

• JavaScript: Uso de Fetch API para cargar los idiomas y evento de click para cambiar el idioma a Ingles o Español. Ademas cargamos los datos dinamicamente.

• Google Fonts: Fuente Lexend-Deca e Inter para un diseño moderno.

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: Aprendi a manipular el DOM para cargar los datos dinámicos desde un archivo JSON.

3. Cambio de idioma: aprendi a altenar el idioma al hacer click en un boton.

<article class="card__content">
  <h1 class="card__content--title"></h1>
  <p class="card__content--description"></p>
  <div class="card__content--stats">
    <div class="card__content--stats__item">
      <h2 class="card__content--stats__item--number"></h2>
      <p class="card__content--stats__item--description"></p>
    </div>
    <div class="card__content--stats__item">
      <h2 class="card__content--stats__item--number"></h2>
      <p class="card__content--stats__item--description"></p>
    </div>
    <div class="card__content--stats__item">
      <h2 class="card__content--stats__item--number"></h2>
      <p class="card__content--stats__item--description"></p>
    </div>
  </div>
</article>

// data.js
import {
  title,
  description,
  titleStats,
  descriptionStats,
} from "../util/const.js";

export function loadData() {
  fetch("assets/locales/data.json")
    .then((res) => {
      if (!res.ok) {
        throw new Error("Error al cargar el archivo JSON");
      }
      return res.json();
    })
    .then((data) => {
      // Reemplazar la palabra entre [ ] por un <span>
      const formattedTitle = data.previewStats.title.replace(
        /\[(.*?)\]/,
        "<span>$1</span>"
      );

      // Asignar el título y la descripción principal con innerHTML
      title.innerHTML = formattedTitle;
      description.textContent = data.previewStats.description;

      // Obtener los valores de stats correctamente
      const statsArray = Object.values(data.previewStats.stats);

      // Recorrer los elementos de las estadísticas
      statsArray.forEach((stat, index) => {
        titleStats[index].textContent = stat.title;
        descriptionStats[index].textContent = stat.description;
      });
    })
    .catch((error) => console.error(error));
}

👨‍💻 Author

• GitHub - ImBenja
• Frontend Mentor - @ImBenja
• Instagram - @benjajuarez1_
• Twitter - @benjajuarez_2
• Linkedin - Benjamim Juarez

🙏 Agradecimientos

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