FizzBuzzBang ('-' * 12) Solution to essential FizzBuzz problem, however I got bored and stylized it a little :)
A Pen by Ryan Trimble on CodePen.
FizzBuzzBang ('-' * 12) Solution to essential FizzBuzz problem, however I got bored and stylized it a little :)
A Pen by Ryan Trimble on CodePen.
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>"); |
@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; | |
} |