Skip to main content
se añadieron 764 caracteres en el cuerpo
Origen Enlace
Francute
  • 1.6k
  • 8
  • 15

Para este caso, vas a necesitar javascriptjavascript que es quien te permite dar lógica a la aplicación. En este caso la lógica es, cuando haga click en una carta, quiero que la misma se de vuelta: Cuando haga click en una carta, quiero que la misma se de vuelta.

Con respecto a los estilos csscss, se usa para decir cómo quieres que se vea, y puedes definir 2 clases,clases; una para cuando la carta está normal (boca abajo), y la otra cuando está dada vuelta;vuelta (boca arriba); la llamaremos a esta active y. Y cuando se hagadecida hacer click en un elemento, el mismo agregue otraesta clase active.

Si vas a agregar una nueva clase al elemento, solo te hace falta que tenga las cosas que varían, y no todo lo demás. En este caso

  • Y dentro de ese bloque, definís qué querés que haga, acáen este caso, agregar o remover una clase: this.classList.toggle("active");

De esta forma, una carta boca abajo se verá como <div class="card"></div>, mientras que una boca arriba se verá como <div class="card active"></div>

Por ejemplo:


Hay que resaltar, que esta es solo una forma para resolver tu problema. Cuando usas javascript, estás planteando "cómo" quieres resolver tu problema. Yo puedo pensarlo resolviéndolo de esta forma, otro puede pensarlo creando una clase por cada carta, mantener un estado para cada uno y cambiarlo, y cada uno decide cual forma de resolver usar, porque le parece más simple, más natural, más eficiente, o más mantenible y escalable, etc.

Para este caso, vas a necesitar javascript que es quien te permite dar lógica a la aplicación. En este caso la lógica es, cuando haga click en una carta, quiero que la misma se de vuelta.

Con respecto a los estilos css, puedes definir 2 clases, una para cuando la carta está normal, y la otra cuando está dada vuelta; active y cuando se haga click en un elemento, el mismo agregue otra clase.

Si vas a agregar una nueva clase, solo te hace falta que tenga las cosas que varían, y no todo lo demás. En este caso

  • Y dentro de ese bloque qué querés que haga, acá, agregar una clase: this.classList.toggle("active");

Por ejemplo:

Para este caso, vas a necesitar javascript que es quien te permite dar lógica a la aplicación. En este caso la lógica es: Cuando haga click en una carta, quiero que la misma se de vuelta.

Con respecto a los estilos css, se usa para decir cómo quieres que se vea, y puedes definir 2 clases; una para cuando la carta está normal (boca abajo), y la otra cuando está dada vuelta (boca arriba); la llamaremos a esta active. Y cuando decida hacer click en un elemento, el mismo agregue esta clase active.

Si vas a agregar una nueva clase al elemento, solo te hace falta que tenga las cosas que varían, y no todo lo demás. En este caso

  • Y dentro de ese bloque, definís qué querés que haga, en este caso, agregar o remover una clase: this.classList.toggle("active");

De esta forma, una carta boca abajo se verá como <div class="card"></div>, mientras que una boca arriba se verá como <div class="card active"></div>

Por ejemplo:


Hay que resaltar, que esta es solo una forma para resolver tu problema. Cuando usas javascript, estás planteando "cómo" quieres resolver tu problema. Yo puedo pensarlo resolviéndolo de esta forma, otro puede pensarlo creando una clase por cada carta, mantener un estado para cada uno y cambiarlo, y cada uno decide cual forma de resolver usar, porque le parece más simple, más natural, más eficiente, o más mantenible y escalable, etc.

Origen Enlace
Francute
  • 1.6k
  • 8
  • 15

Para este caso, vas a necesitar javascript que es quien te permite dar lógica a la aplicación. En este caso la lógica es, cuando haga click en una carta, quiero que la misma se de vuelta.

Con respecto a los estilos css, puedes definir 2 clases, una para cuando la carta está normal, y la otra cuando está dada vuelta; active y cuando se haga click en un elemento, el mismo agregue otra clase.

Si vas a agregar una nueva clase, solo te hace falta que tenga las cosas que varían, y no todo lo demás. En este caso

.card.active {    /* Siendo la clase active la que presenta variación */
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-webkit-linear-gradient(Red,Red);
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-moz-linear-gradient(Red,Red);
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),-o-linear-gradient(Red,Red);
    background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),linear-gradient(Red,Red);
    border: 5px solid green;
}

Y con javascript, puedes decir:

  • Buscar todas las cartas: document.querySelectorAll(".card")
  • Para cada carta, definir que haga algo al hacer click

.

document.querySelectorAll("#cards .card").forEach(function(card) {
  card.addEventListener('click', function(evento) {
    
  });
});
  • Y dentro de ese bloque qué querés que haga, acá, agregar una clase: this.classList.toggle("active");

Por ejemplo:

document.querySelectorAll(".card").forEach(function(card) {
  card.addEventListener('click', function(evento) {
    this.classList.toggle("active");
  });
});
.card {
  display: block;
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -webkit-linear-gradient(Royalblue, Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -moz-linear-gradient(Royalblue, Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -o-linear-gradient(Royalblue, Royalblue);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), linear-gradient(Royalblue, Royalblue);
  background-size: 110px, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center;
  width: 200px;
  height: 255px;
  border: 5px solid white;
  border-radius: 5px;
}

.card.active {
  url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"),
  -webkit-linear-gradient(red,
  red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -moz-linear-gradient(red, red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), -o-linear-gradient(red, red);
  background-image: url("http://i492.photobucket.com/albums/rr281/neversinned/design/icons/256x256/other/Globe.png"), linear-gradient(red, red);
  border: 5px solid green;
}
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>