¡Estoy de regreso después de otro difícil desafío de JavaScript30 de Wes Bos! El desafío de hoy fue mucho más trabajo de lo que supuse al principio. Mantener presionada la tecla Mayús para marcar varias casillas es una práctica tan común que me sorprendió ver que no está integrada en los sitios web automáticamente y que tenías que codificarla manualmente tú mismo. Obviamente, si ese fuera el caso, entonces esta lección no existiría, pero ya sabes a qué me refiero.

Con total transparencia, me di por vencido y seguí a Wes en esta lección. El video incluso comenzó con él animándonos a tomar las riendas y resolverlo nosotros mismos. Después de más de una hora y media de buscar en Google e intentar cualquier tipo de progreso real, me di por vencido y seguí esta lección. No estoy orgulloso de haberme dado por vencido con esto, pero definitivamente estaba cayendo en una madriguera de información irrelevante y dudo que se me hubiera ocurrido una solución real en algún momento de esta semana. Así que sí... con la cabeza baja, seguí a Wes.

Esta lección se explica por sí misma. Se le proporciona una lista de verificación básica y luego se le pide que permita marcar varias casillas manteniendo presionada la tecla Mayús mientras marca una casilla. Fresco. Esto resultó ser mucho más complicado de lo que pensaba. Antes de sumergirnos en la lección real y en lo que fue necesario de nuestra parte, hay una cosa que quiero destacar.

    input:checked   p {
      background: #F9F9F9;
      text-decoration: line-through;
    }

Esta línea muy simple de CSS fue genial para mí. Sabía que era posible crear una casilla de verificación con HTML con pero no sabía que se pueden cambiar las propiedades de la casilla de verificación/el div en el que se encuentra la casilla de verificación con CSS simplemente marcando la casilla. También quiero señalar aquí que Wes también mencionó la frecuencia con la que decía la palabra "verificar" porque aparecía mucho en el video... advertencia, será igual de frecuente en esta publicación.

  let log = document.querySelector('#log');
  document.addEventListener("click", logKey)
  function logKey(e) {
    console.log(`The shift key is pressed: ${e.shiftKey}`);}

function validate() {
  if (document.getElementsByClassName('item').checked) {
    alert('checked');
  } else { alert('you didnt check it!')} }
validate()  
  let checkBoxes = document.querySelectorAll('checkbox');
  let selected = [];
  for (let i=0; i 



Todo lo que hay en el bloque de código encima de esta línea fue un error.  Estos fueron sólo algunos de mis intentos de intentar encontrar la solución por mí mismo.  Varias veces sentí que estaba en el camino correcto.  Por ejemplo, la primera parte con la función logKey(e). Me sentí muy orgulloso de descubrir cómo llamar cuando se presionó la tecla Mayús durante un clic y cuando no.  Después de eso... ni siquiera podía adivinar cómo proceder.  Nuevamente me quedé estancado.


const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]')
let lastChecked

function handleCheck(e) {
  let inBetween = false
if (e.shiftKey && this.checked){
  checkboxes.forEach (checkbox => {
    console.log(checkbox)
    if (checkbox === this || checkbox === lastChecked) {
      inBetween =!inBetween;
    }
    if(inBetween) {
      checkbox.checked = true
    }
  })
}
  lastChecked = this;
}
checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));




Wes estuvo aquí para salvar el día con esto.  Dijo que sería posible marcar varias casillas llamando al padre/hijo en el HTML, pero esto podría romperse fácilmente con los cambios realizados en el HTML.  En lugar de eso, nos hizo usar un bucle for, o al menos un forEach.  Esto tuvo mucho sentido para mí.  Es una forma bastante sencilla de revisar cada parte del HTML mientras verifica si se marcó una casilla en el camino.  Sin embargo, eso fue solo la mitad de la batalla.

  Después de usar forEach, tuvimos que crear una nueva variable para determinar qué elemento estaba entre el primer elemento marcado y el último elemento marcado.  Así sería como marcaríamos las casillas restantes y cambiaríamos sus propiedades para reflejar las de los elementos que se marcaron inicialmente.  Había tantas líneas aquí que me tenían un poco perdido... otra vez usando el || y usando un ! antes de una variable son conceptos extraños para mí.  Tengo que investigarlos más antes de mi próximo proyecto.

   Antes de darme cuenta de lo que estaba pasando de alguna manera ya terminamos el desafío.  Simplemente funcionó.  Fue en ese momento que vi que este desafío era mucho más sencillo de lo que pensaba.  Al fin y al cabo, no era tanto código.  Poder utilizar todas las piezas juntas fue la parte complicada.  Podría haber podido resolver esto yo mismo, pero aun así, dudo que hubiera podido encontrar una solución viable para finales de esta semana.

  Bueno, ¡esto concluye esta publicación!  La lección de hoy no fue la mejor para mí, pero fue un buen recordatorio de que todavía me queda un largo camino por recorrer.  Espero que vuelvas para ver mi próxima publicación con la siguiente parte de JavaScript 30 de Wes Bos con - 11 reproductor de video HTML5 personalizado.