Skip to main content
2 de 2
se añadieron 764 caracteres en el cuerpo
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, 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

.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, 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:

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>


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.

Francute
  • 1.6k
  • 8
  • 15