JSFiddle - React, Tailwind, and code Playground

by Andra Jimenez

HTML

<div class="image-container">
<img src="http://lorempixel.com/150/150?1">
<img src="http://lorempixel.com/150/150?2">
<img src="http://lorempixel.com/150/150?3">
</div>

CSS

img{
  margin:30px;
}

.image-container{
  background:#ddd;
  border-radius:30px;
  text-align:center;
}

.selected{
  box-shadow:0 0 20px #000;
  border:1px dotted white;
  transform:scale(1.3)
}

JavaScript

//DOM week 2 exercise 1
// Higlight the selected image by assigning it the class "selected"

/*$(".image-container img").click(function(){
  $(".image-container img").removeClass("selected");  $(this).addClass("selected");
     
})*/


//or 
$(".image-container img").click(function(){
  $(".selected").removeClass("selected");  $(this).addClass("selected");
     
})