<h1>Fizz Buzz</h1>
<div id="fizzbuzz"></div>
body {
  background-color: #1d1f20;
  color: white;  
  font-family: sans-serif;
}
.number{  
}
.fizz::before{
  content: 'fizz ';
  color: tomato;
}
.buzz::before{
  content: 'buzz ';
  color: yellowgreen;
}
.fizz.buzz::before{
  content: 'fizzbuzz \a'; /* new line */
  white-space: pre;
  color: orange;    
}
!function(){

  var items = '', 
      fizz, buzz,
      isNumber, number,
      cssClass, 
      index;

  for	(index = 1; index <= 100; index++){

    fizz = index % 3 === 0;
    buzz = index % 5 === 0;
    isNumber = !fizz && !buzz;
    cssClass = '', 
    number = '';
    
    if(fizz) cssClass += 'fizz ';  
    if(buzz) cssClass += 'buzz ';
    if(isNumber) {
      	cssClass += 'number ';
      	!function formatIndexWithTwoDigits(){
        	number = ('0' + index).slice(-2) + ' ';  
      	}();      
    }

		items += "<span class='" + cssClass + "'>" + number + "</span>";
	}    
  
  document.getElementById('fizzbuzz').innerHTML = items;  
}();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.