CSS Bingo Slot Machine ~ CODING-GREED

BINGO SLOT MACHINE

HTML:

	<!DOCTYPE html>
	<html>

	<head>
	<title>PUZZEL</title>
	</head>
	<body>
	<div id="container">
	<table border="3" cellpadding="3px">
	<tr>
	<td><input type="box" value=&spades; readonly="true" class="td1"></td>
	<td><input type="box" value=&clubs; readonly="true" class="td2"></td>
	<td><input type="box" value=&hearts; readonly="true" class="td3"></td>
	</tr>
	<tr style="height:100px">
	<td colspan="3"><input type="box" value="?????" readonly="true" class="bingo"></td>
	</tr>
	<tr style="height:50px">
	<td colspan="3"><button onclick="lucky()" class="c_here">CLICK HERE&spades;</button></td>
	</tr>
	</table>
	<div id="count"><input type="box" readonly="true" class="c_ount" value="?"></div>
	</div>
	</body>

	</html>

view raw slot.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: silver;
	}
	#container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	#container:before {
	content: "";
	position: absolute;
	width: 210px;
	height: 180px;
	background: linear-gradient(
	55deg,
	#80cbc4 0px 80px,
	#b2dfdc 80px 100px,
	#80cbc4 100px 110px,
	#b2dfdc 110px 115px,
	#80cbc4 115px 117px,
	#b2dfdc 117px 125px,
	#80cbc4 125px 170px
	);
	opacity: 0.3;
	}
	table {
	background: #000000c9;
	}
	.td1,
	.td2,
	.td3 {
	width: 50px;
	height: 50px;
	font-size: 2.5em;
	font-family: courier;
	font-weight: bolder;
	text-align: center;
	background-color: #000000c9;
	color: white;
	} /*
	.am:after
	{
	position: absolute;
	content: "";
	width:50px;
	height: 50px;
	background: green;
	}*/
	button {
	font-family: courier;
	font-weight: bolder;
	font-size: 1.5em;
	height: 60px;
	width: 100%;
	}
	button:hover {
	box-shadow: 2px 2px black;
	}
	.bingo {
	width: 190px;
	height: 100px;
	font-family: courier;
	font-weight: bolder;
	font-size: 3em;
	text-align: center;
	}
	#count {
	width: 95px;
	height: 95px;
	background: #000000c9;
	position: relative;
	top: 50px;
	left: 50px;
	border: 10px double #000000c9;
	box-shadow: inset 0px 0px 5px black;
	border-radius: 90px;
	}
	#count:before {
	position: absolute;
	content: " ";
	width: 95px;
	height: 96px;
	background: linear-gradient(
	55deg,
	#80cbc4 0px 80px,
	#b2dfdc 80px 100px,
	#80cbc4 100px 110px,
	#b2dfdc 110px 115px,
	#80cbc4 115px 117px,
	#b2dfdc 117px 125px,
	#80cbc4 125px 170px
	);
	opacity: 0.3;
	border-radius: 90px;
	}

	.c_ount {
	width: 90px;
	height: 90px;
	font-weight: bolder;
	font-family: courier;
	font-size: 2.5em;
	text-align: center;
	border-radius: 90px;
	}

view raw slot.css hosted with ❤ by GitHub

Java Script:

	//--------------------Main Code---------------------------------
	var mo = 0;
	function lucky() {
	mo = mo + 1;
	document.getElementsByClassName("c_ount")[0].value = mo;
	document.getElementsByClassName("c_here")[0].style.boxShadow =
	"inset 0px 0px 2px 2px #000000c9";
	var a = document.getElementsByClassName("td1");
	var b = document.getElementsByClassName("td2");
	var c = document.getElementsByClassName("td3");
	var x = Math.ceil(Math.random() * 10);
	var y = Math.ceil(Math.random() * 10);
	var z = Math.ceil(Math.random() * 10);
	color_change(x, "td1");
	color_change(y, "td2");
	color_change(z, "td3");
	a[0].value = x;
	b[0].value = y;
	c[0].value = z;
	if (x == y && x == z) {
	var bing = document.getElementsByClassName("bingo");
	bing[0].value = "BINGO";
	bing[0].style.backgroundColor = "red";
	bing[0].style.color = "white";
	alert("BINGO !!");
	// ----reseting counter-----------
	mo = 0;
	}
	else {
	var bing = document.getElementsByClassName("bingo");
	bing[0].value = "LOOSER";
	bing[0].style.backgroundColor = "white";
	bing[0].style.color = "black";
	}
	//document.getElementsByClassName("c_here")[0].style.boxShadow="4px 4px black";
	}

	//------------------------color changing code-------------------------------
	function color_change(no, cls) {
	switch (no) {
	case 1:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "red";
	break;
	case 2:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "green";
	break;
	case 3:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "blue";
	break;
	case 4:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "pink";
	break;
	case 5:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "yellow";
	break;
	case 6:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "orange";
	break;
	case 7:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "brown";
	break;
	case 8:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "purple";
	break;
	case 9:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "violet";
	break;
	case 10:
	document.getElementsByClassName(cls)[0].style.backgroundColor = "skyblue";
	break;
	}
	}