nakome
12/9/2013 - 6:33 PM

A Pen by Moncho Varela.

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>

The Lotto

Only Experiment (location.reload() not work)

A Pen by Moncho Varela on CodePen.

License.