Visual FizzBuzz Solution

HTML CSS and JavaScript Solution for FizzBuzz Challenge





This is a great visual solution to the FizzBuzz challenge using HTML5 CSS and JavaScript.



*Featured Code Created by Anurag Kumar


Source Code


HTML5 CSS and JavaScript



<!DOCTYPE html>
<html>
<head>
    <title>FizzBuzz</title>
    <style>
        * {
    padding:0;
    margin:0;
    box-sizing:border-box;
    outline:none;
}

.wrapper{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
}

.page{
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background-color:#eee;
}

.page:last-child{
    display:none;
}

.input-area{
    width:200px;
    height:200px;
    background-color:#ccc;
    border-radius:3px;
    box-shadow:1px 1px 2px rgba(0,0,0,.25);
}

input{
    height:40px;
    width:160px;
    padding:10px;
    margin-left:20px;
    margin-top:20px;
    border:none;
    border-radius:3px;
    color:#888;
}

.input-area button{
    height:40px;
    width:160px;
    padding:10px;
    margin-left:20px;
    margin-top:20px;
    border:none;
    border-radius:3px;
    color:white;
    background-color: #66BB6A ;
}

.display{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:200px;
    height:200px;
    background-color:#7E57C2;
    border-radius:3px;
    box-shadow:1px 1px 2px rgba(0,0,0,.25);
}

span{
    font-size:40px;
    text-align:center;
    color:white;
}

button.stop{
    height:40px;
    width:200px;
    border:none;
    margin-top:20px;
    border-radius:3px;
    color:white;
    background-color: #EF5350 ;
}

.fizz{
    position:absolute;
    display:none;
    align-items:center;
    justify-content:center;
    width:200px;
    height:200px;
    margin-top:-30px;
    background-color:#E91E63;
    border-radius:3px;
    box-shadow:1px 1px 2px rgba(0,0,0,.25);
    z-index:0;
}

.buzz{
    position:absolute;
    display:none;
    align-items:center;
    justify-content:center;
    width:200px;
    height:200px;
    margin-top:-30px;
    background-color:#FFCA28;
    border-radius:3px;
    box-shadow:1px 1px 2px rgba(0,0,0,.25);
    z-index:0;
}

.fizzbuzz{
    position:absolute;
    display:none;
    align-items:center;
    justify-content:center;
    width:200px;
    height:200px;
    margin-top:-30px;
    background-color:#FF7043;
    border-radius:3px;
    box-shadow:1px 1px 2px rgba(0,0,0,.25);
    z-index:0;
}

.pop{
    animation:pop 1s ease-in;
}

@keyframes pop{
    0%{
        transform:scale(1,1);
    }
    15%{
        transform:scale(1.5,1.5);
    }
    75%{
        transform:scale(1,1);
        opacity:0;
    }    
    100%{
        transform:scale(1,1);
        opacity:0;
    }
}


    </style>
    
</head>
<body>




    <div class="wrapper">
        <div class="page" id="intro">
            <div class="input-area">
                <input type="number" id="f" placeholder="Fizz Number">
                <input type="number" id="b" placeholder="Buzz Number">
                <button onclick="start()">
                    Start
                </button>
            </div>
        </div>
        <div class="page" id="display">
            <div class="display">
                <span id="number">
                    
                </span>
            </div>
            <div class="fizz">
                <span>
                    Fizz
                </span>
            </div>
            <div class="buzz">
                <span>
                    Buzz
                </span>
            </div>
            <div class="fizzbuzz">
                <span>
                    Fizz/Buzz
                </span>
            </div>
            <button onclick="stop()"
            class="stop">
                Stop
            </button>
        </div>
    </div>
    <script>
        var n = 0;
var fizz;
var buzz;
var clock;

function increment(){
    n++;
    
    var f;
    var b;
    var fb;
    var display;
    
    display = byId("number");
    fb = byClass("fizzbuzz");
    b  = byClass("buzz");
    f  = byClass("fizz");
    
    f.style.display = "none";
    f.classList.remove("pop");
    b.style.display = "none";
    b.classList.remove("pop");
    fb.style.display = "none";
    fb.classList.remove("pop");
    
    if(n%fizz==0 && n%buzz==0){
        fb.style.display = "flex";
        fb.classList.add("pop");
    }
    else if(n%fizz==0){
        f.style.display = "flex";
        f.classList.add("pop");
    }
    else if(n%buzz==0){
        b.style.display = "flex";
        b.classList.add("pop");
    }
    
    display.innerHTML = n.toString();
}

function start(){
    byId("display").style.display= "flex";
    n = 0;
    fizz = parseInt(byId("f").value);
    buzz = parseInt(byId("b").value);
    clock = setInterval(increment,1000);
}

function stop(){
    clearInterval(clock);
    byId("display").style.display= "none";
}

function byId(id){
    var e;
    e = document.getElementById(id);
    return e;
}

function byClass(cl){
    var e;
    e = document.getElementsByClassName (cl)[0];
    return e;
}


    </script>
</body>
</html>


Click here to run this Code



Share with Friends


Twitter Facebook Google LinkedIn Email Pinterest Reddit StumbleUpon Tumblr


I hope you enjoyed this content please consider supporting the development of Free Code Examples


Thank you and have a Blessed Day






Try these Fun Games by Bobbie:


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News


Comments

Popular posts from this blog