<!--
Practicing with the dev interview classic, FizzBuzz! Using Bootstrap 3.
Trying out some techniques described in https://ditam.github.io/posts/fizzbuzz/
My intention is to use some of the more complex methods without overcomplicating the solution.
MVP Requirements:
Just a regular ol' FizzBuzz for now. 1-100, add Fizz if %3 == 0, add Buzz if %5 == 0, else print the number. That's it!
-->
<button class="btn btn-lg btn-block btn-primary" type="submit" onclick="fizzBuzz();">Run FizzBuzz</button></canvas></div><br>
<div class="container-fluid" id="fizzBuzzBox"><div class="col-xs-12">
</div></div>
html {
text-align:center;
font-weight:bold;
padding:50px;
}
.fizz, .buzz, .fizzbuzz, .i {
padding:5px;
margin: 1px;
}
.fizz {
background-color: #CFF09E;
}
.buzz {
background-color: #79BD9A;
}
.fizzbuzz {
background-color: #3B8686;
background: linear-gradient(-45deg, #CFF09E, #3B8686);
color:#fff;
}
.i {
background-color: #0B486B;
color:#fff;
}
@media only screen and (max-width:1000px) {
.fizz, .buzz, .fizzbuzz, .i {
font-size: .8em;
padding:2px;
}
}
@media only screen and (max-width:768px) {
html {
padding:0px;
}
.fizz, .buzz, .fizzbuzz, .i {
font-size: .7em;
}
}function fizzCheck(n){
return (n%3 === 0);
}
function buzzCheck(n){
return (n%5 === 0);
}
function fizzBuzz(){
var output = new Array();
var length;
// Generate array data
for(var i=1;i<=100;i++){
if (fizzCheck(i)){
if (buzzCheck(i)){
output.push('FizzBuzz');
} else {
output.push('Fizz');
}
} else if (buzzCheck(i)) {
output.push('Buzz');
} else {
output.push(i);
}
}
// Display array data
output.forEach(function(input){
var element = document.getElementById('fizzBuzzBox');
if (input == 'Fizz'){
element.insertAdjacentHTML("beforeend", '<div class="col-xs-1 fizz">Fizz</div>');
} else if (input == 'Buzz'){
/* document.write('<div class="col-med-1 buzz">Buzz</div>'); */
element.insertAdjacentHTML("beforeend", '<div class="col-xs-1 buzz">Buzz</div>');
}
else if (input == 'FizzBuzz'){
element.insertAdjacentHTML("beforeend", '<div class="col-xs-1 fizzbuzz">FizzBuzz!</div>');
}
else {
element.insertAdjacentHTML("beforeend", '<div class="col-xs-1 i">' + input + '</div>');
}
});
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.