Skip to content

Instantly share code, notes, and snippets.

@DynamiteC

DynamiteC/index.html

Created August 12, 2018 15:29
Show Gist options
  • Save DynamiteC/f0cdae68410eda1f1b7a414a48c4ec97 to your computer and use it in GitHub Desktop.
Save DynamiteC/f0cdae68410eda1f1b7a414a48c4ec97 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/bosumer
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
* {
box-sizing: border-box;
font-family: sans-serif
}
main {
max-width: 960px;
margin: 0 auto;
min-width: 250px;
padding: 30px;
}
p {
max-width: 500px;
}
.fizz-buzz-item {
display: block;
float: left;
width: 80px;
height: 80px;
text-align: center;
border: 1px solid grey;
margin-right: 5px;
margin-bottom: 5px;
}
.fizz-buzz-item span {
vertical-align: middle;
line-height: 80px;
}
.fizz, .fizzbuzz {
border: 4px solid green;
}
.buzz, .fizzbuzz {
background-color: #D5F5E3;
}
</style>
</head>
<body>
<main>
<h1>Fizz Buzz</h1>
<section>
<p>In this game, you enter a positive number, and I count from 0 to that number, subbing in "fizz" if it's divisible by 3, "buzz" if it's divisible by 5, and "fizzbuzz" if it's divisible by both</p>
<form id="number-chooser" action="www.somewhere.com">
<label for="number-choice">Choose a positive number</label>
<input id="number-choice" name="number-choice" type="number" required />
<input type="submit" />
</form>
</section>
<section>
<h2>Results</h2>
<div class="js-results"></div>
</section>
</main>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script id="jsbin-javascript">
// your code here
$(function () {
$('#number-chooser').submit(function(event) {
event.preventDefault();
$('.js-results').empty();
var choice = parseInt( $(event.currentTarget).find('input[name="number-choice"]').val());
var arr = [];
for(var x = 1; x <= choice; x++)
{
if(x%3==0 && x%5==0)
arr.push('fizzbuzz');
else if(x%3==0)
arr.push('fizz');
else if(x%5==0)
arr.push('buzz');
else
arr.push(x);
}
arr.forEach(function (x){
var element = $('<div class="fizz-buzz-item"><span>' + x + '</span></div>');
if (x == 'fizzbuzz' || x == 'fizz' || x == 'buzz') {
element.addClass(x);
}
$('.js-results').append(element);
});
});
});
</script>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
font-family: sans-serif
}
main {
max-width: 960px;
margin: 0 auto;
min-width: 250px;
padding: 30px;
}
p {
max-width: 500px;
}
.fizz-buzz-item {
display: block;
float: left;
width: 80px;
height: 80px;
text-align: center;
border: 1px solid grey;
margin-right: 5px;
margin-bottom: 5px;
}
.fizz-buzz-item span {
vertical-align: middle;
line-height: 80px;
}
.fizz, .fizzbuzz {
border: 4px solid green;
}
.buzz, .fizzbuzz {
background-color: #D5F5E3;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// your code here
$(function () {
$('#number-chooser').submit(function(event) {
event.preventDefault();
$('.js-results').empty();
var choice = parseInt( $(event.currentTarget).find('input[name="number-choice"]').val());
var arr = [];
for(var x = 1; x <= choice; x++)
{
if(x%3==0 && x%5==0)
arr.push('fizzbuzz');
else if(x%3==0)
arr.push('fizz');
else if(x%5==0)
arr.push('buzz');
else
arr.push(x);
}
arr.forEach(function (x){
var element = $('<div class="fizz-buzz-item"><span>' + x + '</span></div>');
if (x == 'fizzbuzz' || x == 'fizz' || x == 'buzz') {
element.addClass(x);
}
$('.js-results').append(element);
});
});
});</script></body>
</html>
Raw
jsbin.bosumer.css
* {
box-sizing: border-box;
font-family: sans-serif
}
main {
max-width: 960px;
margin: 0 auto;
min-width: 250px;
padding: 30px;
}
p {
max-width: 500px;
}
.fizz-buzz-item {
display: block;
float: left;
width: 80px;
height: 80px;
text-align: center;
border: 1px solid grey;
margin-right: 5px;
margin-bottom: 5px;
}
.fizz-buzz-item span {
vertical-align: middle;
line-height: 80px;
}
.fizz, .fizzbuzz {
border: 4px solid green;
}
.buzz, .fizzbuzz {
background-color: #D5F5E3;
}
Raw
jsbin.bosumer.js
// your code here
$(function () {
$('#number-chooser').submit(function(event) {
event.preventDefault();
$('.js-results').empty();
var choice = parseInt( $(event.currentTarget).find('input[name="number-choice"]').val());
var arr = [];
for(var x = 1; x <= choice; x++)
{
if(x%3==0 && x%5==0)
arr.push('fizzbuzz');
else if(x%3==0)
arr.push('fizz');
else if(x%5==0)
arr.push('buzz');
else
arr.push(x);
}
arr.forEach(function (x){
var element = $('<div class="fizz-buzz-item"><span>' + x + '</span></div>');
if (x == 'fizzbuzz' || x == 'fizz' || x == 'buzz') {
element.addClass(x);
}
$('.js-results').append(element);
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment