Product Component Made with HTML, CSS and JS with JSON Dynamically

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

Frontend Mentor - Product preview card component solution

Esta es mi solución al desafío Product 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.

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 datos Dinamicamente.

• Google Fonts: Fuente Montserrat y Frounces 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 y ademas hacer una animacion al hacer click en el boton add to cart.

<article class="card__content">
  <span class="card__category"></span>
  <h1 class="card__title"></h1>
  <p class="card__description"></p>
  <div class="card__price">
    <span class="card__price--current"></span>
    <span class="card__price--old"></span>
  </div>
  <button class="card__button">
    <img src="images/icon-cart.svg" alt="Cart" />
    Add to Cart
  </button>
</article>

// data.js
import {
  productCategory,
  productTitle,
  productDescription,
  productPrice,
  productPreviusPrice,
} 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");
      }
      return res.json();
    })
    .then((data) => {
      productCategory.textContent = data.productPreview.category;
      productTitle.textContent = data.productPreview.title;
      productDescription.textContent = data.productPreview.description;
      productPrice.innerHTML =
        "$" + data.productPreview.productPrice.currentPrice;
      productPreviusPrice.innerHTML =
        "$" + data.productPreview.productPrice.previousPrice;
    })
    .catch((error) => {
      console.error("Error:", error);
    });
}

👨‍💻 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.