Profile Card Hecho 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 - Profile card component solution

Esta es mi solución al desafío Profile 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 y hovers interactivos.

• 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 Kumbh Sans 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. Proceso De Pedido: Aprendi a crear un proceso de pedido con un modal.

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

<figure class="card__content--image"></figure>
<div class="card__content--nameage">
  <h1 class="card__content--name"></h1>
  <span class="card__content--age"></span>
</div>
<p class="card__content--city"></p>
<hr />
<section class="card__content--stats">
  <article class="card__content--info--stats">
    <h2 class="card__content--info--stats--number followers"></h2>
    <p class="card__content--info--stats--text followers">Followers</p>
  </article>
  <article class="card__content--info--stats">
    <h2 class="card__content--info--stats--number likes"></h2>
    <p class="card__content--info--stats--text likes">Likes</p>
  </article>
  <article class="card__content--info--stats">
    <h2 class="card__content--info--stats--number photos"></h2>
    <p class="card__content--info--stats--text photos">Photos</p>
  </article>
</section>

// main.js
import { loadData } from "./components/data.js";
import { loadTranslations, toggleLanguage } from "./components/languaje.js";
document.addEventListener("DOMContentLoaded", () => {
  loadData();
  loadTranslations();

  // Botón de cambio de idioma
  const langBtn = document.getElementById("langBtn");
  langBtn.addEventListener("click", toggleLanguage);
});

const menuBtn = document.querySelector("#attribution-btn");
const menu = document.querySelector("#attribution-menu");
menu.classList.remove("attribution-menu--active");

menuBtn.addEventListener("click", () => {
  menu.classList.toggle("attribution-menu--active");
});

👨‍💻 Autor

• 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.