tell me about your

tell me about your

by mihaifm

HTML

<div id="holder">
    Tell me about your <div id="things"><div>
</div>

CSS

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v11/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
    
}
#holder {
    font-size: 16px;
    font-family: Lato;
    color #669
}
#things {
    display: inline-block;
    text-align: center;
    width: 70px;
    padding: 2px;
    padding-top: 1px;
    
    background-color: #669;
    color: white;
    margin-left: 5px;
    border-radius: 4px;
}

JavaScript

var things = [
    'self',
	'plans', 
	'work',
	'dog',
	'drone',
	'song',
	'startup',
	'life',
	'idea',
	'band',
	'website',
    'country',
	'cat',
	'hobby',
	'sleep',
	'dreams',
	'lover',
	'cooking',
	'story',
	'name',
	'house',
	'family',
	'hates',
	'likes',
    'travels'
	];


var i = 1;
$("#things").text(things[0]);

setInterval(function() {
    $("#things").text(things[i]);
    i++;
    if (i > things.length - 1)
    {
        i = 0;
    }
}, 1100);