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
I hope you enjoyed this content please consider supporting the development of Free Code Examples
Comments
Post a Comment