Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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>
  
</body>
</html>
 
* {
  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 {
  color: #fff;
  background-color: #76f2be;
}
 
function fizzBuzz(countTo) { 
  var arr = []
  for (i = 1; i <= countTo; i++) {
    if (i%15 === 0) {
      arr.push('fizzbuzz')
    } else if (i%3 === 0) {
      arr.push('fizz')
    } else if (i%5 === 0) {
      arr.push('buzz')
    } else {
      arr.push(i)
    }
  }
  return arr
}  
​
$('#number-chooser').submit(function(event) {
  countTo = $('#number-choice').val()
  var results = fizzBuzz(countTo)
  console.log($(this))
  $.each(results.arr), function(index, value) {
    console.log($(this))
    var fizzBuzzItem = $('.js-results').append('<div class="fizz-buzz-item"><span>' + $(this).value + '</span></div>')
    return fizzBuzzItem
   }
})
​
​
​
​
​
/*
Instructions:
This time you'll create an event listener that listens for 
when a user submits a form indicating how high to count. 
This event should cause the program to create the FizzBuzz sequence 
up to the number requested by the user.
​
For each element in the FizzBuzz sequence, your code should insert an element into 
the .js-results div that looks like this:
​
<div class="fizz-buzz-item">
  <span>1</span>
</div>
​
If the element's content is the word "fizz", the div with .fizz-buzz-item should also get 
the class .fizz applied. If the element's content is the word "buzz" it should get
the class ".buzz" applied. And if its content is the word "fizzbuzz", it should get 
the class "fizzbuzz" applied.
*/
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jhwheelerpro
0viewers