Recipe 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 - Recipe page 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.

• 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 Young Serif y Outfit 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.

<section class="card__content">
  <h1 class="card__content--title"></h1>
  <p class="card__content--description"></p>

  <article class="card__content--preparation">
    <h2 class="card__content--preparation-title">Preparation time</h2>
    <ul class="card__content--preparation-list"></ul>
  </article>
  <article class="card__content--ingredients">
    <h2 class="card__content--ingredients-title">Ingredients</h2>
    <ul class="card__content--ingredients-list"></ul>
  </article>
  <hr />
  <article class="card__content--instructions">
    <h2 class="card__content--instructions-title">Instructions</h2>
    <ol class="card__content--instructions-list"></ol>
  </article>
  <hr />
  <article class="card__content--nutrition">
    <h2 class="card__content--nutrition-title">Nutrition</h2>
    <p class="card__content--nutrition-description">
      The table below shows nutritional values per serving without the
      additional fillings.
    </p>
    <table class="card__content--nutrition-table">
      <tbody></tbody>
    </table>
  </article>
</section>

// data.js
import {
  title,
  description,
  listTime,
  listIngredients,
  listInstructions,
  tableNutrition,
} from "../util/const.js";

export function loadData() {
  fetch("assets/locales/data.json")
    .then((response) => {
      if (!response.ok) {
        throw new Error("Erro ao carregar os dados");
      }
      return response.json();
    })
    .then((data) => {
      title.textContent = data.title;
      description.textContent = data.description;

      listTime.innerHTML = `
        <li><p><strong>Total:</strong> ${data.preparation_time.total}</p></li>
        <li><p><strong>Preparation:</strong> ${data.preparation_time.preparation}</p></li>
        <li><p><strong>Cooking:</strong> ${data.preparation_time.cooking}</p></li>
      `;
      listIngredients.innerHTML = data.ingredients
        .map((ingredient) => {
          return `<li><p>${ingredient}</p></li>`;
        })
        .join("");
      listInstructions.innerHTML = data.instructions
        .map((instruction) => {
          return `<li><p><strong>${instruction.title}:</strong> ${instruction.description}</p></li>`;
        })
        .join("");
      tableNutrition.innerHTML = `
        <tr>
          <th>Calories</th>
          <th>Protein</th>
          <th>Fat</th>
          <th>Carbohydrate</th>
        </tr>
        <tr>
          <td>${data.nutrition.calories}</td>
          <td>${data.nutrition.carbs}</td>
          <td>${data.nutrition.protein}</td>
          <td>${data.nutrition.fat}</td>
        </tr>
      `;
    });
}

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