JSFiddle - React, Tailwind, and code Playground

by sptx457

HTML

<p>
  <input type="text" name="enter" class="player" value=""/>
    <input class="submit" type="button" value="Submit"/>
</p>

<p>
  <span class="player_name"></span>
</p>

<div class="backpack">

</div>
<p class="item">
  <img id="superdog" class="hide-item" src="https://s-media-cache-ak0.pinimg.com/736x/96/e4/34/96e434db8906125b7ea5a94ea070785f.jpg" />
</p>

<p class="item">
  <img id="rucksack" class="hide-item" src="https://s-media-cache-ak0.pinimg.com/736x/12/90/0a/12900aaf8340427901419c52c893dab6.jpg" />
</p>

<p class="item">
  <img id="ocarina" class="hide-item" src="https://www.zeldadungeon.net/Zelda05/Items/OcarinaofTime_Large.png" />
</p>

<p class="item">
  <img id="rupee" class="hide-item" src="http://static4.wikia.nocookie.net/__cb20120501010503/zeldafanon/images/3/37/RedRupee.png" style="width: 40px;" />
</p>

<p class="item">
  <img id="crown" class="hide-item" src="http://vignette2.wikia.nocookie.net/zelda/images/4/45/Ocarina_of_Time_Artwork_Goron's_Bracelet_(Artwork).png/revision/latest?cb=20160423104411" />
</p>

<p class="item">
  <img id="heart" class="hide-item" src="http://vignette2.wikia.nocookie.net/fantendo/images/d/d4/Heart_contener.png/revision/latest?cb=20130921193535" />
</p>
<br><br>

  <img data-item="superdog" class="selected" src="https://s-media-cache-ak0.pinimg.com/736x/96/e4/34/96e434db8906125b7ea5a94ea070785f.jpg" />

  <img data-item="rucksack" class="selected" src="https://s-media-cache-ak0.pinimg.com/736x/12/90/0a/12900aaf8340427901419c52c893dab6.jpg" />

  <img data-item="ocarina" class="selected"  src="https://www.zeldadungeon.net/Zelda05/Items/OcarinaofTime_Large.png" />

  <img data-item="rupee" class="selected"  src="http://static4.wikia.nocookie.net/__cb20120501010503/zeldafanon/images/3/37/RedRupee.png" style="width: 40px;" />

  <img data-item="crown" class="selected" src="http://vignette2.wikia.nocookie.net/zelda/images/4/45/Ocarina_of_Time_Artwork_Goron's_Bracelet_(Artwork).png/revision/latest?cb=20160423104411"...

CSS

.submit {
  background-color: lightgrey;
  width: 100px; 
  height: auto;
  text-align: center;
  padding: 5px;
  cursor: pointer;
}

.submit:hover {
  background-color: white;
}

.item {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  display: inline-block;
  margin: 20px;
  
}

.item-added {
  border: 2px solid blue;
}

img {
  width: 60%;
  display: block;
  margin: 20px auto;
}

.hide-item {
  display: none;
}

.selected {
  max-width: 40px;
  height: 40px;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
}

JavaScript

var backpack = {
	owner: false,
  name: "",
  has_item: false,
  item: {
  	superdog: "", 
    rucksack: "", 
    ocarina: "", 
    rupee: "", 
    crown: "", 
    heart: ""
  }
};

$(".submit").click(function() {
  var player_name = $(".player").val();
	backpack.name = player_name;
	$(".player_name").text(backpack.name + "'s backpack");
});

var backpack_has_item = function($item) {
	if (backpack.item[$item] != "") {
    backpack.has_item = true;
  }
};

var highlight_active_container = function($item_id) {
	if (backpack.has_item) {
    $item_id.parent("p").addClass("item-added");
  }
};

$(".selected").click(function() {
  var $item = $(this).attr("data-item");
  var $item_id = $("#" + $item);

  if (backpack.item.hasOwnProperty($item)) {
    	backpack.item[$item] = $item;
      $item_id.show();
      $(this).remove();
  }
  
  backpack_has_item($item);
  highlight_active_container($item_id);
});

/*
var selected = document.getElementsByClassName("selected");
var item = selected.getAttribute("data-item");
var new_item = document.getElementById(item); 

var check_object_for_match = function() {
  
  if (backpack.hasOwnProperty(new_item)) {
    	backpack[new_item] = new_item;
      new_item.style.display = block;   
  }
};

for (var i = 0; i < selected.length; i++) {
    selected[i].addEventListener('click', check_object_for_match, false);
}
*/