FizzBuzzBang

FizzBuzzBang.markdown

FizzBuzzBang ('-' * 12) Solution to essential FizzBuzz problem, however I got bored and stylized it a little :)

A Pen by Ryan Trimble on CodePen.

License.

script.js

document.write("<div class='container'>");
for (i = 1; i < 1000; i++) { 
 	if ((i % 3 === 0) && (i % 5 === 0)){
    document.write("<span class='fizzbuzz'>FizzBuzz </span>");
  }
  else if (i % 3 === 0){
    document.write("<span class='fizz'>Fizz </span>");
  }
  else if(i % 5 === 0){
    document.write("<span class='fizzbuzz'>Buzz</span>");
  }
  else if(i % 7 === 0){
    document.write("<span class='buzz'>Bang</span>");
  }
  else{
    document.write("<span class='else'>"+ i + "</span>");
  }
}

document.write("</div>");

style.css

@import url(http://fonts.googleapis.com/css?family=Kelly+Slab);

body{
  background:#333;
  text-align:center;
  
}
.container{
  /*display:block;*/
  margin:0 auto;
}
.fizzbuzz, .fizz, .buzz, .else{
  display:inline-block;
  height:125px;
  width:200px;
  padding-top:75px;
  font-size:2em;
  font-family: 'Kelly Slab', cursive;
  color: #333;
}
.fizzbuzz{
  background:#2ecc71;
}
.fizz{
  background:#3498db;
}
.buzz{
  background:#e74c3c;
}
.else{
   background:#ecf0f1;
}