Manejando modales

Un modal siempre debería tener tres salidas (a mi modo de ver): El botón de cerrar, clic fuera del modal para que se cierre, y con la tecla **esc **del teclado.

Con ESC no hubiera sido lo mismo?

Claro, porque de no tener el botón de cierre el modal hubiese tenido una “trampa para el foco del teclado”, ¿cierto?

Listo el reto de poner la imagen del proyecto al que le da click de manera dinámica con JavaScript completado!!

Como vimos cada imagen tiene un evento click, que lleva a una función llamada: openModal que recibe el parámetro e (El cual trae toda la información del evento)

Y tras inspeccionar ese parámetro e la ruta: e.srcElement.currentSrc te devuelve la ruta de la imagen y ya simplemente modifico el atributo src por esta ruta, así:

function openModal(e) {
  /* Este código ya lo tenía la profesora para mostrar el modal */
  document.querySelector(".modal-container").style.display = "flex";

  /* IMG contiene la ruta de la imagen */
  let IMG = e.srcElement.currentSrc;
  /* Pongo esa ruta en el parametro src de la imagen */
  document.querySelector("#img-modal").setAttribute("src", IMG);
}

Y en el HTML para modificar la imagen le puse un id (Eso es lo que llamo en el código javascript anterior):

<img
          id="img-modal"
          src="./images/project1.png"
          class="modal-project-image"
          alt="Proyecto de Ejemplo"
        />

Si quieren que el screenshot del modal cambie dependiendo de a cual proyecto le hagan click, solamente tienen que agregar una linea de código.
.
Busquen en el archivo index.js una función llamada openModal y le agregan esta segunda línea de código que les muestro:
.

/** Esta funcion se llama cuando la persona hace click en cualquier porjecto del carousel */
function openModal(e) {
  document.querySelector(".modal-container").style.display = "flex";
  document.querySelector(".modal-project-image").setAttribute("src", e.target.getAttribute("src"))
}

Recién estoy aprendiendo JS, y me parece genial lo que puede llegar a hacer 😄

Mi solución al reto.
En el HTML agregue un id al button.

 <li class="project1-container"><button class="project project1" id="newid-1"><img src="./images/project1.png"  class="project-img" alt="Mi primer proyecto" /></button></li>

No supe como obtener directamente el source del e (ya algunos compañeros mostraron como), así que en mi JS use un switch para cada caso:

 document.querySelectorAll(".project").forEach(element => {
    element.addEventListener("click", e => {
      var newid = element.getAttribute("id");
      switch (newid){
        case "newid-1":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project1.png");
          break;
        case "newid-2":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project2.png");
          break;
        case "newid-3":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project3.png");
          break;
        case "newid-4":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project4.png");
          break;
        case "newid-5":
          document.querySelector('.modal-project-image').setAttribute("src", "./images/project5.png");
          break;
        default:
          break;
      }
      return openModal(e)});
  });

function openModal(e) {
  const url = e.target.localName === 'button' 
    ? e.target.firstElementChild.src
    : e.target.src
  document.querySelector(".modal-container").style.display = "flex";
  document.querySelector('.modal-project-image').style.cssText = `
    background: center / cover no-repeat url('${ url }');
  `
  e.stopPropagation()
}

La lógica está muy entendible del JS

Muy bien. Continuemos 😃

aca solucione el problema de agregar los distintos modales para cada imagen. utilice expresiones regulares para capturar el outerHTML de la direccion en especifico ya que la parte comentada del codigo solo funcionaba con el mouse y usando el teclado y el enter se rompia

function openModal(e) {
  let etiqueta = e.toElement.outerHTML 
  //e.srcElement.currentSrc  o  e.toElement.src
  const regular = /\.\/images\/project\d*\.[a-z]{2,4}/;
  let address = etiqueta.match(regular)
  document.querySelector(".modal-project-image").setAttribute('src',address[0])
  document.querySelector(".modal-container").style.display = "flex";
  document.getElementById("modal-header").focus
}```

La manera en que logré hacer que se mostrara la imagen del modal dependiendo de a cual se hace click:

const imgProyect1 = './images/project1.png'
const imgProyect2 = './images/project2.png'
const imgProyect3 = './images/project3.png'
const imgProyect4 = './images/project4.png'
const imgProyect5 = './images/project5.png'

function openModal(e) {
  document.querySelector(".modal-container").style.display = "flex";
  const imagenModal = document.getElementById('imagen-modal')
  switch (e.target.id) {
    case 'img-carousel1':
      imagenModal.src = imgProyect1
      break;
    case 'img-carousel2':
      imagenModal.src = imgProyect2
      break;
    case 'img-carousel3':
      imagenModal.src = imgProyect3
      break;
    case 'img-carousel4':
      imagenModal.src = imgProyect4
      break;
    case 'img-carousel5':
      imagenModal.src = imgProyect5
      break;
    default:
      break;
  }
}

👌