No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Pull Requests: aportando código a proyectos en GitHub

25/28
Recursos

Aportes 219

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Les comparto mi PR

https://github.com/platzi/curso-frontend-developer-practico/pull/11

Deploy del proyecto

https://canti21.github.io/frontend-developer-practico-js-practico/

Me tome la libertad de hacer algunas mejoras.

En primera agregue una especie de filtro que oscurece el resto de la pagina cuando un menú o el detalle de producto se encuentra activo:

Tambien cambie la posicion del detalle del producto al centro de la pagina. Le agregue un padding y corregi los bordes:

Por ultimo, agregue una pagina 404 bastante sencilla:

Hasta donde he probado funciona bien, pero si tienen alguna sugerencia no duden en decirmelo 😄

Nooo verán mi código y dirán PERO QUE ESPAGUETTI ES ESTO!

jajajajaja

Esta feo pero es trabajo honesto :p

Mi primer Pull Request

Pull Request en gihub

Deploy

Pagina para ver mi proyecto del curso
Y dejo unas pequeñas funcionalidades extra que realice durante el curso.

En caso que quieras ver otros proyectos realizados por mi, te invito a mi perfil de github

Pull Request

Deploy

Agregue una animación a los menus, haciendo fade in cada vez que el usuario da clic sobre alguno de ellos

Hola, comunidad. Yo le agregue algo de interactividad a la hora de seleccionar un articulo, para que me aparezca el modal con los datos del articulo seleccionado 😃

Les comparto humildemente mi enlace, sólo le corregí el desktop menú y le agregué otras imágenes 😅

Otra cosa que aprendí hoy es a poner imágenes en los comentarios jajaja 😄

Los invito a que vean en este sitio publicado mi proyecto hasta esta parte del curso, agregue el consumo de un api rest para cargar items a la pagina (ya se que no son productos como tal, pero se ve muy interesante el hecho de usar un api y no dejar quemados items), ademas hice mi propia version de eventos y funciones en el js.

Demo fucnional: Mi sitio publicado en git

Aqui mi aporte al repo de git: Pull Request 324

Proyecto en GIT: Link directo a repo GIT

Hola, Aqui les comparto mi resultado, tanro el pull request como mi github.

Pull Request
https://github.com/platzi/curso-frontend-developer-practico/pull/90

Deploy de la pagina
https://abrahamrdrd.github.io/curso-frontend-developer-JS/

Acá les dejo mi PR:

https://github.com/platzi/curso-frontend-developer-practico/pull/120

Y acá el enlace del proyecto:

https://tiken-dev.github.io/curso-frontend-developer-javascript-practico

He agregado animaciones con CSS y algunos cambios en el CSS. He utilizado box-shadows y transitions para que al cambiar de Menú haya una interacción. Los menús se esconden fuera de la pantalla. También he utilizado la propiedad Opacity para que los menús aparezcan y desaparezcan con una transición y no se muestre o se oculte de golpe.

🤓 Me gustaría mucho que en los cursos utilizaran CodeStream para manejar PR, Issues, Code Review y todo lo que ofrece. Es una herramienta fantástica que no he tenido la oportunidad de probar con otra persona.
Si no saben de qué les hablo, les dejo el curso por aquí Curso de Flujo de Desarrollo Moderno CodeStream

Por mi parte agregé una iteracción en el carrito de compras.

Ahora podemos agregas productos al carrito, actualización del numero de productos en el icono y el precio total al agregar y quitar productos.

demo desktop:

demo mobile:

github Pages: https://gabygramajo.github.io/curso-frontend-developer-practico/

Para esto tuve que:

  • agregarle una clase (btn-add-to-cart) a la etiqueta figure que contiene la imagen del carrito en product detail.
  • agregarle un id a cada figure para diferenciar cada componente de product detail.
  • agrege las siguientes clases dentro de product detail: product-card-img, product-info-price y product-info-name.
  • agregé un id (shopping-cart-products) al div que contiene el numero de productos en el carrito de compras y mediante js se actualiza al agregar o quitar un producto al carrito.
  • agrege el los id my-order-content-text y TotalPrice en el html.

Todos los ids y las clases agregadas fue para poder manipularlos desde Javascript.

Repositorio: https://github.com/gabygramajo/curso-frontend-developer-practico

Seguramente muchas cosas se podrían haber solucionado de una manera más sencilla, pero bueno jajaj es lo que se me ocurrió con lo que sé. Cualquier crítica, comentario o correción es bienvenida 💚 NUNCA PARES DE APRENDES 💚

Pull Request:

https://github.com/platzi/curso-frontend-developer-practico/pull/40

Deploy del proyecto:

https://jos017.github.io/curso-frontend-javascript-practico/index.html

Cambios añadidos:

  • Animaciones simples de los menus
  • Oscurecimiento de la pantalla al abrir menus
  • Correcta selección de imágenes e info cuando se da click en un producto

Yo no hice pull request por que trabaje sobre el mismo repositorio que cree cuando hice mi versión de YardSale en el curso de Teff. Aún así comparto mi resultado final como prueba de que si termine la fusión del mismo!
.
Repositorio
repo
.

Les comparto mi Pull Request:
https://github.com/platzi/curso-frontend-developer-practico/pull/130

  • Le agrege más dinamismo al menú y funcionalidad al carrito de compra.

Comparto mi aporte
Añadi nuevos estilos y funcionalidades
Agregar y quitar del carrito.

https://ramrider89.github.io/front-dev-practico/index.html

🚀 Comparto mi PR
https://github.com/platzi/curso-frontend-developer-practico/pull/281

🚀 **Deploy del proyecto **
https://ferneynava.github.io/Yard-Sale-JavaScript-Practico/


💚

He agregado dos funcionalidades: la primera seleccionar un producto y que me muestre los detalles de ese producto seleccionado, segundo contador de productos seleccionados en el carrito de compras.

💚🚀Se ha realizado modificaciones en el styles.css como cambio de colores de texto y background animado, también se utilizó Glassmorphism para los menús.

Fusionar, renombrar y organizar componentes en la vista principal #298

  • Los componentes fusionados (*) fueron:
    • clase11.html (navbar.html)
    • clase7.html (account-options)
    • clase8.html (menu-mobile)
    • clase13.html (cart)
    • clase6.html (product-grid)
    • clase12.html (product-detail)
  • Todos los archivos clase.html fueron renombrados, y los que se fusionaron en index.html se eliminaron.
  • Los archivos están organizado en carpetas css, html y javascript:
    css/
    └── styles.css
    html/
    ├── index.html
    └── clase.html
    javascript/
    └── main.js
    
    • Todos los estilos y media queries están dentro de styles.css.
    • Igual con todo el código javascript en main.js.

(*) Se modificaron algunos estilos para evitar conflictos y mejorar interacción con el usuario.


.
Ese es mi Pull Request y comentario que deje (:

Para oscurecer la pantalla al dar click en alguno de los iconos, se añade lo siguiente:

  1. Un nuevo div en el archivo .html, justo debajo de la etiqueta nav:
<nav>...</nav>
<div class="darken inactive"></div>
  1. Se modifican las funciones en el archivo .js, para activar y desactivar la clase de este nuevo div:
//En mi caso, estos son los nombres de cada constante según su clase

const barraEmail = document.querySelector('.navbar-email');
const burgerIcon = document.querySelector('.menu');
const carritoIcon = document.querySelector('.navbar-shopping-cart');
const cardIcon = document.querySelector('.cards-container');
const xIcon = document.querySelector('.product-detail-close');
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const asideOne = document.querySelector('#tarjetaChica');
const asideTwo = document.querySelector('#tarjetaDetallada');

const backgroundDarkening = document.querySelector('.darken');

//Escribí un backgroundDarkening.classList.toggle('inactive'); dentro de cada función que ya tenía

function toggleBurgerMenu() {
    mobileMenu.classList.toggle('inactive');
    backgroundDarkening.classList.toggle('inactive');
    asideOne.classList.add('inactive');
    asideTwo.classList.add('inactive');
    if (mobileMenu.classList.contains('inactive')) {
        backgroundDarkening.classList.add('inactive');
    }
}
function toggleCarritoMenu() {
    asideOne.classList.toggle('inactive');
    backgroundDarkening.classList.toggle('inactive');
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    asideTwo.classList.add('inactive');
    if (asideOne.classList.contains('inactive')) {
        backgroundDarkening.classList.add('inactive');
    }
}
function toggleDesktopMenu() {
    desktopMenu.classList.toggle('inactive');
    backgroundDarkening.classList.toggle('inactive');
    asideOne.classList.add('inactive');
    asideTwo.classList.add('inactive');
    if (desktopMenu.classList.contains('inactive')) {
        backgroundDarkening.classList.add('inactive');
    }
}
function toggleTarjetaDetallada() {
    asideTwo.classList.toggle('inactive');
    backgroundDarkening.classList.toggle('inactive');
    asideOne.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    if (asideTwo.classList.contains('inactive')) {
        backgroundDarkening.classList.add('inactive');
    }
}
function toggleTarjetaDetalladaDos() {
    asideTwo.classList.toggle('inactive');
    backgroundDarkening.classList.add('inactive');
}
function toggleDarken() {
    backgroundDarkening.classList.toggle('inactive');
}

barraEmail.addEventListener('click', toggleDesktopMenu);
carritoIcon.addEventListener('click', toggleCarritoMenu);
burgerIcon.addEventListener('click', toggleBurgerMenu);
cardIcon.addEventListener('click', toggleTarjetaDetallada);
xIcon.addEventListener('click', toggleTarjetaDetalladaDos);
backgroundDarkening.addEventListener('click', toggleDarken);
  1. Se modifica el parámetro nav y se crea el parámetro .darken el archivo .css, para acotar el tamaño del background oscuro. Junto con ello, se crea un nuevo @media:
nav {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
    background-color: var(--white);
    z-index: 1;
  }
.darken {
    width: 100%;
    height: calc(100%);
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
@media (max-width: 640px) {
    .darken {
        display: none;
    }
  }

Mi pull request
Ver pull request

Mi deploy
Ver deploy

Les comparto mi proyecto: https://antcodernez.github.io/course-js-practice-on-platzi/

La voy a estar mejorando y poniendole funcionalidades propias, y el css lo hice cuando apenas estaba aprendiendo así que de momento es una aplicacion toda rota y fea pero es trabajo honesto xd

Comparto mi Proyecto enviado a pull request:
https://github.com/platzi/curso-frontend-developer-practico/pull/1573/files

Mis commit fueron:

Vale-78 added 6 commits 4 days ago
@Vale-78
Añadí menú en Nav para desktop fusionando clases 7 y 11
3c97d4b
@Vale-78
Añadí menú para mobile con sus media query necesarios en css.Abre desde menú burger.Fusioné a index, la Clase 8
@Vale-78
fusioné clase 13: Menú de carrito de compras(aside product detail. interacción entre menúMobile y Desktop con el carrito. Al abrir uno, se cierra el otro.
@Vale-78
Correccion html class product-detail interactive. Clase 6 Lista de compras desde JS recorriendo Array.
@Vale-78
Fusioné clase 12: Detalle del producto seleccionado
a1c19b0
@Vale-78
Logré interacción entre todos los componentes, en especial menues y cada desplegable… f3fd9e8

Este es el enlace a mi primer pull request de este proyecto, a medida que vaya progresando hire haciendo otros con las mejoras. Saludos!!
https://github.com/platzi/curso-frontend-developer-practico/pulls

Demo del proyecto: https://jaracar84.github.io/curso-frontend-developer-javascript-practico/

Juanda: "Tratando de solucionar todas estas vueltas"
yo:

Comparto mi PULL REQUEST

💪

  • Desktop

  • Mobile

Les comparto la API de Platzi ( Platzi Fake Store API). Esto, para que, la tengan (futuros cursos, proyectos o probar).

🎉 Pull Request y Deploy hechos ✨✨

NOTA: Para completar una parte de JavaScript me guié de este repo que publico otro alumno de Platzi :3, solo que lo acomode un poco a mi manera 😅😅

Mi PR
https://github.com/platzi/curso-frontend-developer-practico/pull/509
Deploy del proyecto
https://codebreaker518.github.io/curso-frontend-developer-javascript-practico/

Las cosas que yo hice en el proyecto son mas visuales y un poco de funcionalidad pero mas enfocada en la versión Mobile, es completamente responsive.

Mobile menu

  • Contiene una pequeña animación deslizante
  • Cuando esta activo, se desactiva el scroll vertical de todo el body (permitiéndonos tener una mejor vista y experiencia en mobile)
  • Ancho y alto del 100% mediante un calc() del 100vh - el alto de la barra de navegación

Shopping Cart

  • Contiene un pequeño hover en el simbolo “<” en “My Order” el cual se pinta de color verde
  • El mismo simbolo “<” a su vez contiene un Event Listener que cierra el carrito de compras
  • Al igual que el Mobile Menu, al estar activo, se desactiva el scroll vertical de todo el body
  • Ancho y alto del 100% mediante un calc() del 100vh - el alto de la barra de navegación

Product Detail

  • Al igual que los 2 elementos anteriores, al estar activo, se desactiva el scroll vertical de todo el body
  • Ancho y alto del 100% mediante un calc() del 100vh - el alto de la barra de navegación
  • Mediante JavaScript, ahora al hacer click en cualquier imagen, nos mostrara en product detail el producto seleccionado (imagen, precio y nombre).

Agradezco a una chica (que no recuerdo su nombre:c), en la clase de renderProducts que ayudo a varios pasando una lista de productos (que estoy usando) para ahorrarnos un poco de tiempo hehe :’)

❤️

Les agregue mas funcionalidades, donde el usuario pueda ver los detalles del producto que seleccionó, ademas tambien puede agregarlos al carrito de compras :3 aun me faltan cosillas, pero las iré haciendo mientras aprenda un poco mas :3

https://sharoncorpas.github.io/frontend-javascript-practico/index.html

Hola! Comparto mi PullRequest: <https://github.com/platzi/curso-frontend-developer-practico/pull/2197> Deploy: <https://github.com/platzi/curso-frontend-developer-practico/pull/2197#issue-2310956547> Le añadí una ventana para agregar más productos en la página y que estos se mostraran con su info correspondiente en la ventana de product detail.
<https://github.com/platzi/curso-frontend-developer-practico/pull/2200#issue-2325836080> Este es el Pull Request que envié, bastante normalito! Pero considero que apnredí bastante de estas clases y que todo quedó bastante bien!
Comparto mi pull Request <https://github.com/platzi/curso-frontend-developer-practico/pull/2118> ![](https://static.platzi.com/media/user_upload/image-036ebc02-a32b-439a-ac04-74c5ae6cb7fb.jpg)

Hola comunidad Platzi, aquí les comparto mi proyecto, con algunos cambios personales.
https://lehder.github.io/curso-frontend-developer-javascript-practico/fusion.html

Este es mi proyecto:
https://maulozano02.github.io/curso-frontend-developer-javascript-practico/
Modifique el menu poniendo un hover al navbar de la derecha al email y al carrito. Arregle el border bottom ya que en unas medidas no se mostraba completo el border bottom que es la linea gris. Tuve un intento fallido de que funcionara el product detail con cualquier producto por alguna razón solo agregaba el ultimo objeto de mi array, queda pendiente completar eso pero pronto regresare a intentarlo 💪🏼.

me encanta la clase .

📌 Pasos para realizar el Pull request 📌


 

  • • En la terminal, vamos a la carpeta donde se encuentra el proyecto: curso-frontend-developer-javascript, hacemos un git status para verificar si ya no hay mas cambios que reportar a git, también hacemos un git log para ver todos los commits realizados (nota: al dar ENTER, se irá desplazando por cada commit, al llegar a END, presionar las teclas Ctrl + z).
     
  • • Para hacer Pull request, vamos a la página de github y en el repositorio del proyecto, dar a la pestaña que dice “Pull requests”, luego al botón verde “New pull request”, hay que seleccionar cual es la base a la que queremos hacer la solicitud de pull request, en este caso sería el proyecto original “curso-frontend-developer-javascript”, también hay que seleccionar el curso al cual se le hizo cambios, también hay que seleccionar la rama donde se hará el merge, en este caso a la rama “main”.
     
  • • Después nos pide un título: “Fusión de los componentes de la vista principal”, una descripción:
“Agregamos los arhivos index.html, styles.css y main.js para fusionar en una sola vista todos los componentes de la vista principal.
      Archivos / componentes que fusionamos:
      - clase11.html (menú general)
      - clase7.html (menú desktop)
      - clase8.html (menú mobile)
      - clase13.html (carrito de compras)
      - clase6.html (lista de productos)
      - clase12.html (detalles de cada producto)
      Gracias a la fusión los usuarios pueden utilizar el menú de navegación con todos sus componentes. Funciona en mobile, desktopo, cn el carrito de compras y los detalles de un producto, además de renderizar la lista de productos a partir de un array().
      Todos los componentes de probaron individualmente y en conjunto para que los usuarios tengan una buena experiencia”

 

  • • Se puede dar click en el botón verde que dice “Create pull request” y dar en la opción de un borrador: “draft” o crearlo.
     

Excelente curso, Aprendí bastante el cómo manipular el DOM con java scrip

Comparto el link de mi Pull Request 😄
https://github.com/platzi/curso-frontend-developer-practico/pull/1677

También unas capturas en las que empleo lo aprendido en este y anteriores cursos. Que bonito es aprender

Aqui les dejo mi PR:

Yo le añadí alguna funcionalidad: Me parecía interesante que mostrara el detalle del producto en particular y también que al hacer click en** añadir producto** el carrito de la compra mostrase los artículos, así como el **precio total **y el número total de artículos.

Me divertí muchísimo con este proyecto y he aprendido mucho de las aportaciones de otros compañeros. Gracias 🥰

BUENAS BUENAS…

Les dejo mi Pull Request del Proyecto: https://github.com/platzi/curso-frontend-developer-practico/pull/1412

Espero poder realizar mas… Nos vemos.

Mi repo

Les comparto el repositorio donde estoy subiendo todos los apuntes y taresa de la ruta de aprendizaje FullStack de platzi ❤️

https://github.com/MassiSulic/FullStack-Platzi

Hola comunidad uwu

No hice un pull request, pero me gustaría compartir lo que realice en el curso

Yardsale Online
Pronto iré agregando más funcionalidades, espero les guste c:

Aquí va mi práctica con el PULL request.
Muchas gracias @JUANDC por todo.

https://github.com/platzi/curso-frontend-developer-practico/pull/1226

Hola! Muchas gracias, el curso me ha gustado mucho.

Aquí dejo mi Pull Request.

Mi proyecto es bastante similar al del curso. Uno de los cambios significativos en mi código es que no utilicé las condicionales en los menú para esconderlos, simplemente utilizaba .classList.add('inactive'); para cerrar todos los menus cuando el usuario quiera abrir uno, así evito muchas condicionales.

Resultado desktop

Resultado mobile

Enlace a mi pull request
Pull

Hola, les comparto mi Pull Request

Vista principal
![](

Detalles de los articulos
![](

Carrito de compras
![](

Gracias ⭐️

Luego de casi un mes trabajando una horita(todos los días) puedo decir que Aquí esta mi proyecto(prometo mejorarlo y añadir mas funciones), agregué funcionalidades de:

  • Arreglo de objetos, en donde se encuentran los productos.
  • Desplegar todos los productos desde JS.
  • Desplegar categorias desde JS.
  • Filtrar los productos por categorías.
  • Agregar un fondo al momento de dar click en cualquier funcionalidad( carrito, aside, email…).
  • El aside muestra la info del producto al que se le dio click.
  • Agregar producto desde el aside.
  • Editar el carrito para agregar/eliminar productos y contador de los items.
  • Mensaje “Your cart is empty” cuando no hay items en el carrito.
  • Calcular y visualizar el total de los productos en el carrito( calcula cuando se agrega y se elimina).
  • Y el ultimo es un poco ambicioso ( aún trabajo en el problema) y es que al momento de dar click en cualquier parte de la pantalla se cierre lo que este activo.

Enlace al deploy

Enlace al PR

Mi Perfil en GitHub

Creo varias cosas del código puede ser solucionado de una manera más “facil” o “sencilla”, pero la solución aquí planteada es base del conocimiento y práctica que he aquirido hasta día de hoy💚!

Creé funciones que agrupan la funcionalidades generales de los elementos, se simplifica más el código JS obteniendo la misma funcionalidad.

https://github.com/platzi/curso-frontend-developer-practico/pull/980

Que emoción!!! MI pirmer Pull request :
https://github.com/platzi/curso-frontend-developer-practico/pull/899

Hice pequeños cambios en la animación del Menu mobile…muy contenta de todo lo que he aprendido…

Dejo mi Pull Request (PR) para que puedan observar el trabajo sugerido para mergear:

https://github.com/platzi/curso-frontend-developer-practico/pull/858

Les comparto mi PR

Mi PR:

https://github.com/platzi/curso-frontend-developer-practico/pull/763
================================================-

Mi pull request es similar, quería vivir el proceso antes de proseguir con mi creación (tienda en línea para productos de artesanas mexicanas):

https://github.com/platzi/curso-frontend-developer-practico/pull/764

Este es mi Pull Request

Al final no pude agregar los elementos al carrito de compras, necesito un poco más de ayuda con eso, pero hice algunos cambios para que el objeto individual se pueda ver en cualquier parte gracias a position fixed. Además le puse un borde cuando se hace hover a cada uno de los elementos.

Mi demo 😄

Aquí esta mi proyecto, agregue varias funcionalidades, como:

  • Editar el carrito para agregar/eliminar productos.
  • Cambiar el estado de los iconos del carrito segun sea el estado.
  • El aside muestra los datos del producto al que se le dio click.
  • Creacion de una clase para los productos para tener mas organizacion a la hora de crearlos.
  • Visualización del total a pagar en el carito de compras.
  • Visualización de cuantos elementos hay en el carrito desde la vista externa.

Enlace al repositorio:
https://github.com/FredYegres/yard-sale

Enlace al deploy en GitHubPages:
https://fredyegres.github.io/yard-sale/

Este es el enlace a mi 👉 Pull request

Muy buen curso!!!

💪😀😀😀

Mi PR tiene como 1000 cambios porque trabaje siempre sobre mi proyecto desde el curso con la profe steffy, ademas de lo visto hasta ahora use el ‘e.target’ para que el aside de detalles del producto muestre especidicamente el clickado:

https://github.com/platzi/curso-frontend-developer-practico/pull/665

Hola, aqui les dejo mi proyecto.
https://marualexa.github.io/curso-practico-frontend-developer/
suerte a todos.

Les comparto todo lo aprendido en la clase, Juan es un crack https://github.com/platzi/curso-frontend-developer-practico/pull/632

https://github.com/platzi/curso-frontend-developer-practico/pulls/Reyloko22

aquí les dejo mi pullrequest.

Tuve un pequeño error en la consola, pero si me dejo ‘pullear’ intente investigar, pero no me queda claro.

El error es el siguiente al colocar el comando de git log decía esto:
fatal: not a git repository (or any of the parent directories): .git

muy bueno el curso aprendi bastante.

Dejo el enlace a mi pull request:
https://github.com/platzi/curso-frontend-developer-practico/pull/517
Excelente curso!

Buenas noches compañeros, quien podría ayudarme a solucionar este inconveniente?

Es interesante aprender de forma practica de como poder integrar HTML CCS & JS
https://github.com/platzi/curso-frontend-developer-practico/pull/378

Muy genial el curso, le perdi el miedo jejejeje nice

Les comparto mi PR, han sido clases de mucho aprendizaje y crecimiento profesional.
https://github.com/platzi/curso-frontend-developer-practico/pull/376
Un excelente curso.

https://github.com/platzi/curso-frontend-developer-practico/pull/277

En lo personal no oculte los menus al abrir product detail, lo que agregue fue una clase para hacer dinámico el mostrar productos.

Hice algunas modificaciones para hacer el ejercicio de fondo estilo modal y tambien para que la información del producto siempre fuera visible sin importar el scroll.
Lo que hice fue agregar un div que ocupara toda la pantalla con un background, un opacity y un z.index

.product-container-modal-box {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Use this properties if you want to disable background like a modal*/
    background: black;
    opacity: 0.5;
}

Y encapsulé la información del producto en otro div

.product-container-box {
    position: fixed;
    left: 0;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
}

https://github.com/platzi/curso-frontend-developer-practico/pull/177
este es mi pr
aunque mucho no se , voy a seguir investigando para mejorar !

Aquí les dejo mi repositorio, yo utilice typescript en este proyecto para ponerlo en practica
https://github.com/tesapoeitor/platzi-curso-frontend-developer-practico
y aquí el deploy
https://tesapoeitor.github.io/platzi-curso-frontend-developer-practico/