GenerateHTML

loads of html :D

by MiloSx7

HTML

<div class="item-container" id="itemContainer">

</div>

CSS

.hud-item {
	position: relative;
	flex-direction: row;
	width: 64px;
	height: 64px;
	margin: 5px;
	box-sizing: border-box;
	cursor: pointer;
	box-shadow: inset 0 0 0 1px rgb(128, 128, 128);
	transition: box-shadow .3s;
}
.hud-item:hover { box-shadow: inset 0 0 10px 1px rgb(0, 204, 255); }
.hud-item:hover .hud-tooltip { display: initial; }
.hud-tooltip {
	display: none;
	position: absolute;
	width: 500%;
	height: auto;
	padding: 10px;
	top: 125%;
	left: -200%;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, .9);
	border: 1px solid rgba(0, 0, 0, 1);
	border-radius: 1px;
	text-align: center;
	z-index: 1;
	animation-name: animatetooltip;
  animation-duration: .3s;
}
.hud-tt-header-container {
	display: flex;
}
.hud-tt-info-container {
	display: flex;
	flex-grow: 1;
	flex-wrap: wrap;
}
.hud-tt-lv-container {
	width: 64px;
	height: 64px;
}
.col-half { flex-basis: 50%; padding: 5px; box-sizing: border-box; }
.col-full { flex-basis: 100%; padding: 5px; box-sizing: border-box; }

@keyframes animatetooltip {
  from { left: -240%; opacity: 0; }
  to { left: -200%; opacity: 1; }
}

.item-container {
  width: 232px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red;
}

.fgrey{ color: #808080; }
.fwhite{ color: #FFFFFF; }

JavaScript

var upgName = [
	"Laser Beam", // 0
	"Laser Intensifier", //2
	"Laser Amplifier", //3
	"Nitrogen Cooler", //5
	"Reload Accelerator", //6
	"Plasma Clip", //7
	"Explosion Propulsion", //10
	"Explosion Intensifier", //8
	"Explosion Amplifier" //9
]
var upgId = [
	"lasBeam", //Laser Beam
	"lasIntens", //Laser Intensifier
	"lasAmp", //Laser Amplifier
	"nitCool", //Nitrogen Cooler
	"relAcc", //Reload Accelerator
	"pClip", //Plasma Clip
	"expProp", //Explosion Propulsion
	"expIntens", //Explosion Intensifier
	"expAmp" //Explosion Amplifier
]
var upgInfo = [
	"Basic beam for your laser gun. Low price makes it efficient, scalable upgrade", //Laser Beam
	"Intensifies the laser for more damage", //Laser Intensifier
	"Amplifies the laser strength", //Laser Amplifier
	"Advanced cooler that prevents your LaserGun from heating up", //Nitrogen Cooler
	"Reduces time needed to reload the LaserGun", //Reload Accelerator
	"Holds so much more ammo than basic clip, meaning you wont have to reload very often", //Plasma Clip
	"Laser now explodes upon impact", //Explosion Propulsion
	"Intensifies the explosion for more damage", //Explosion Intensifier
	"Amplifies the explosion strength" //Explosion Amplifier
]
var upgRes = [
	"plutonium", //Laser Beam
	"plutonium", //Laser Intensifier
	"plutonium", //Laser Amplifier
	"viridium", //Nitrogen Cooler
	"viridium", //Reload Accelerator
	"viridium", //Plasma Clip
	"heridium", //Explosion Propulsion
	"heridium", //Explosion Intensifier
	"heridium" //Explosion Amplifier
]

document.getElementById("itemContainer").onload = generateUpgrades();

function generateUpgrades() {
	var content = "";

	for (i = 0; i < 9; i ++) {
		content +=	"<div class=\"hud-item\" id=\"" + upgId[i] + "\">" +
									"<img src=\"client/img/" + upgId[i] + ".png\" id=\"" + upgId[i] + "Img\">" +
									"<div class=\"hud-tooltip f16 fwhite\">" +
										"<div class=\"hud-tt-header-container\">" +
											"<div class=\"hud-tt-info-container\">" +
												"<div...