Cars INF 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 - 3-Column Preview Card Component Solution

Esta es mi solución al desafío 3-column 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 Big Shoulders Display y Lexend Deca 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 cargar los datos dinamicamente mediante un bucle For.

<main class="container">
  <section class="card sedans">
    <figure class="card__image sedans"></figure>
    <article class="card__content">
      <h1 class="card__title"></h1>
      <p class="card__description"></p>
      <button class="card__btn sedans">Learn More</button>
    </article>
  </section>
  <section class="card suvs">
    <figure class="card__image suvs"></figure>
    <article class="card__content">
      <h1 class="card__title"></h1>
      <p class="card__description"></p>
      <button class="card__btn suvs">Learn More</button>
    </article>
  </section>
  <section class="card luxury">
    <figure class="card__image luxury"></figure>
    <article class="card__content">
      <h1 class="card__title"></h1>
      <p class="card__description"></p>
      <button class="card__btn luxury">Learn More</button>
    </article>
  </section>
</main>

// data.js
const title = document.querySelectorAll(".card__title");
const description = document.querySelectorAll(".card__description");
const icon = document.querySelectorAll(".card__image");

export function loadData() {
  fetch("assets/locales/data.json")
    .then((res) => {
      if (!res.ok) {
        throw new Error("Failed to fetch data");
      }
      return res.json();
    })
    .then((data) => {
      for (let i = 0; i < title.length; i++) {
        title[i].innerHTML = data[i].title;
        description[i].innerHTML = data[i].description;
        const img = document.createElement("img");
        img.src = data[i].icon;
        img.alt = data[i].title;
        icon[i].appendChild(img);
      }
    })
    .catch((error) => {
      console.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.