JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<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="/some-server-endpoint">
          <label for="number-choice">Choose a positive number</label>
          <input id="number-choice" name="number-choice" type="number" required />
          <button type="submit">Submit</button>
        </form>
      </section>
      <section>
        <h2>Results</h2>
        <div id="js-results">helloe</div>
      </section>
    </main>

CSS

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

main {
  min-width: 250px;
  max-width: 960px;
  margin: 0 auto;
  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;
}

JavaScript

// your code here
(function($){


$("button").on("click",e =>{
	e.preventDefault()
  const result = fizzBuzz();
  $("#js-results").text(result)
})

function fizzBuzz(){
  var counter = [];
  const value = $('#number-choice').val();
  for (var i = 1; i <= value; i++){
    if (i % 3 === 0 && i % 5 === 0){
      counter.push ('fizzbuzz');
    } else if(i % 3 === 0){
      counter.push ('fizz');
    } else if(i % 5 === 0){
      counter.push ('buzz');
    } else {
      counter.push (i)
    }
  }
  return counter
}
})(window.jQuery)