Marvel Machine Item List

by MegaScience

HTML

<ul class="prize-container">
	<li data-title="[B] Nebulite (Abnormal Status Time)" data-idx="6922">
		[B] Nebulite (Abnormal Status Time)
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/%5bB%5d-Nebulite-(Abnormal-Status-Time).png">
	</li>
	<li data-title="2 Star Enhancement Scroll" data-idx="6900">
		2 Star Enhancement Scroll
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/2-Star-Enhancement-Scroll.png">
	</li>
	<li data-title="2-hour 2x EXP Special Coupon" data-idx="6874">
		2-hour 2x EXP Special Coupon
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/2-hour-2x-EXP-Special-Coupon.png">
	</li>
	<li data-title="3 Star Enhancement Scroll" data-idx="6901">
		3 Star Enhancement Scroll
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/3-Star-Enhancement-Scroll.png">
	</li>
	<li data-title="4 Hours 2x Drop Special Card" data-idx="6875">
		4 Hours 2x Drop Special Card
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/4-Hours-2x-Drop-Special-Card.png">
	</li>
	<li data-title="5,000 Maple Points Chip" data-idx="6953">
		5,000 Maple Points Chip
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/5%2c000-Maple-Points-Chip.png">
	</li>
	<li data-title="9th Anniversary Prime Scroll for Accessory" data-idx="6888">
		9th Anniversary Prime Scroll for Accessory
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/9th-Anniversary-Prime-Scroll-for-Accessory.png">
	</li>
	<li data-title="9th Anniversary Prime Scroll for Armor" data-idx="6891">
		9th Anniversary Prime Scroll for Armor
		<img class="preview" src="http://nxcache.nexon.net/maplestory/shop/gachapon/img/items/9th-Anniversary-Prime-Scroll-for-Armor.png">
	</li>
	<li data-title="9th Anniversary Prime Scroll for One-Handed Weapon" data-idx="6889">
		9th...

CSS

html, body {
  margin: 0;
  padding: 0;
}

ul.prize-container {
  padding: 0;
}

li {
  background-color: lightblue;
  border: 2px solid cyan;
  border-radius: 50px;
  display: block;
  clear: both;
  padding: 2px;
  overflow: auto;
  margin-top: 2px;
  margin-bottom: 2px;
}

li img.preview {
  float: left;
  width: 70px;
  padding-right: 7px;
}

JavaScript

// THE BELOW SORTS DIFFERENTLY. For instance, brackets come before numbers when sorted with localeCompare.
const container = document.querySelector('ul.prize-container')
const entries = Array.from(container.querySelectorAll('li'))
for(const entry of entries) entry.titleU = entry.dataset.title.toUpperCase()
container.append(...entries.sort((a, b) => a.titleU.localeCompare(b.titleU)))

// Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#description
//return;
/*let entries = [...document.querySelectorAll('ul.prize-container li')];
entries.sort((a, b) => {
  let nameA = a.dataset.title.toUpperCase(); // ignore upper and lowercase
  let nameB = b.dataset.title.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
});
let c = document.getElementsByClassName('prize-container')[0];
for(let e of entries) c.appendChild(e);*/