A Pen by Moncho Varela.
body{
background:#34495e;
}
.Absolute-Center {
width: 50%;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
height: 50%;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.button {
background:#1abc9c;
color:#ecf0f1;
display: block;
padding: 1.34em;
margin: 0;
text-decoration: none;
font: bold 1em Sans-Serif;
position: relative;
overflow: hidden;
-webkit-transition: 0.7s;
-moz-transition: 0.7s;
-o-transition: 0.7s;
transition: 0.7s;
cursor:pointer;
}
.button:before {
content: " ";
position: absolute;
width: 10px;
height: 10px;
background: #f55;
border-radius: 50%;
transition: 0.7s;
left: -50px;
top: -40px;
}
.button span {
position: relative;
}
.button:hover, .button:focus {
color: white;
}
.button:hover:before, .button:focus:before {
width: 270px;
height: 270px;
opacity: 1;
}
table{
background:#ecf0f1;
color:#2c3e50;
border:5px solid #1abc9c;
display: table-cell;
}
td, th {
display: table-cell;
vertical-align: inherit;
padding:0.5em;
}
.notUse{
background:#1abc9c;
color:#ecf0f1;
}
.select{
position:relative;
}
.select:before{
content:" X ";
position:absolute;
top:0;
left: 0;
color: #E74C3C;
font-size: 2em;
text-align: center;
margin: 0 auto;
width: 1em;
}
(function(){
'use-strict';
if (typeof app === 'undefined');
var app = { },
uniRands = [],
classList = document.documentElement.classList;
app.set = {
init: function() {
// On init start
this.start();
this.renew()
},
// data-js="" ( extra function )
js: function(el){
return document.querySelector('[data-js="'+el+'"]');
},
// data-num=""
num: function(el){
return document.querySelector('[data-num="'+el+'"]');
},
// Random unique nums
randomNumbers: function(el){
var n=[],i=0;
for(;++i<el;)n.push(i);
for(;--i>6;)n.splice(i*Math.random()|0,1);
return n;
},
// Use math.random to generate
start: function(){
var i=0,one = this.randomNumbers(49);
for (; i < one.length; i++) {
this.getNumbers(this.num(one[i]));
}
},
renew: function(){
this.js('refresh').addEventListener('click',function(){
alert('Sorry this not work in Codepen Thanks- Please reload manually');
//location.reload();
},false);
},
// Get numbers
getNumbers: function(el){
if(this.hasClass(el,'select')){
this.removeClass(el,'select');
}else{
this.addClass(el,'select');
}
},
// hasClass(elem, 'class');
hasClass: function (elem, className) {
if (classList) {
return elem.classList.contains(className);
} else {
return new RegExp('(^|\\s)' +
className +
'(\\s|$)').test(elem.className);
}
},
// addClass(elem, 'class');
addClass: function (elem, className) {
if (classList) {
elem.classList.add(className);
} else {
if (!app.set.hasClass(elem, className)) {
elem.className += (elem.className ? ' ' : '') + className;
}
}
},
// removeClass(elem, 'class');
removeClass: function (elem, className) {
if (classList) {
elem.classList.remove(className);
} else {
if (app.set.hasClass(elem, className)) {
elem.className = elem.className.replace(
new RegExp('(^|\\s)*' +
className +
'(\\s|$)*', 'g'), '');
}
}
},
// Extra
// toggleClass(elem, 'class');
toggleClass: function (elem, className) {
if (classList) {
elem.classList.toggle(className);
} else {
var toggle =
app.set.hasClass(elem, className) ?
app.set.removeClass :
app.set.addClass;
toggle(elem, className);
}
}
};
app.set.init();
}).call(this);
<div class="Absolute-Center">
<table class="random">
<tr>
<td class="notUse" > 1 </td>
<td data-num="10"> 10 </td>
<td data-num="20"> 20 </td>
<td data-num="30"> 30 </td>
<td data-num="40"> 40 </td>
</tr>
<tr>
<td data-num="1"> 1 </td>
<td data-num="11"> 11 </td>
<td data-num="21"> 21 </td>
<td data-num="31"> 31 </td>
<td data-num="41"> 41 </td>
</tr>
<tr>
<td data-num="2"> 2 </td>
<td data-num="12"> 12 </td>
<td data-num="22"> 22 </td>
<td data-num="32"> 32 </td>
<td data-num="42"> 42 </td>
</tr>
<tr>
<td data-num="3"> 3 </td>
<td data-num="13"> 13 </td>
<td data-num="23"> 23 </td>
<td data-num="33"> 33 </td>
<td data-num="43"> 43 </td>
</tr>
<tr>
<td data-num="4"> 4 </td>
<td data-num="14"> 14 </td>
<td data-num="24"> 24 </td>
<td data-num="34"> 34 </td>
<td data-num="44"> 44 </td>
</tr>
<tr>
<td data-num="5"> 5 </td>
<td data-num="15"> 15 </td>
<td data-num="25"> 25 </td>
<td data-num="35"> 35 </td>
<td data-num="45"> 45 </td>
</tr>
<tr>
<td data-num="6"> 6 </td>
<td data-num="16"> 16 </td>
<td data-num="26"> 26 </td>
<td data-num="36"> 36 </td>
<td data-num="46"> 46 </td>
</tr>
<tr>
<td data-num="7"> 7 </td>
<td data-num="17"> 17 </td>
<td data-num="27"> 27 </td>
<td data-num="37"> 37 </td>
<td data-num="47"> 47 </td>
</tr>
<tr>
<td data-num="8"> 8 </td>
<td data-num="18"> 18 </td>
<td data-num="28"> 28 </td>
<td data-num="38"> 38 </td>
<td data-num="48"> 48 </td>
</tr>
<tr>
<td data-num="9"> 9 </td>
<td data-num="19"> 19 </td>
<td data-num="29"> 29 </td>
<td data-num="39"> 39 </td>
<td data-num="49"> 49 </td>
</tr>
</table>
<a class="button generate" data-js="refresh" >
<span>Reload Numbers</span>
</a>
</div>