Hello World

Hello World.markdown

Hello World

Just a test with some Math.random and index. This pen switch numbers to letters. Enjoy !

A Pen by Nicolas Lanthemann on CodePen.

License.

index.html

div.content
  div.random
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.space
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0
    span.nbr.ltr(data-number=0) 0

script.js

$(document).ready(function(){
  
  var $randomnbr = $('.nbr');
  var $timer= 10;
  var $it;
  var $data = 0;
  var index;
  var change;
  var letters = ["h", "e", "l", "l", "o", "w", "o", "r", "l", "d"];
  
  $('.nbr').each(function(){
      
    change = Math.round(Math.random()*100);
    $(this).attr('data-change', change);
    
  });
  
  function random(){
    return Math.round(Math.random()*9);
  };
  
  function select(){
    return Math.round(Math.random()*$randomnbr.length+1);
  };
  
  function value(){
    $('.nbr:nth-child('+select()+')').html(''+random()+'');
    $('.nbr:nth-child('+select()+')').attr('data-number', $data);
    $data++;
    
    $('.nbr').each(function(){
        if(parseInt($(this).attr('data-number')) > parseInt($(this).attr('data-change'))){
          index = $('.ltr').index(this);
          $(this).html(letters[index]);
          $(this).removeClass('nbr');
        }
    });
    
  };
  
  $it = setInterval(value, $timer);
    
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

html, body{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 100;
  background-color: #222;
  color: #eee;
  width: 100%;
  height: 100%;
  .content{
    text-align: center;
    position: relative;
    top: 50%;
    @include transform(translateY(-50%));
    span{
      width:30px;
      display: inline-block;
    }
  }
}