FizzBuzz Challenge by David

FizzBuzz Challenge using Javascript by David

This is a very interesting approach to the FizzBuzz challenge. I love seeing the many different ways things can be accomplished with code.

*Featured Code Created by David Carroll


FizzBuzz Challenge


Set which multiples to apply Fizz or Buzz:
Set range for multiples:


    Source Code

    HTML with CSS and JavaScript

    <!DOCTYPE html>
         body {
      background-color: lightblue;
        <h1>FizzBuzz Challenge</h1>
            <legend>Set which multiples to apply Fizz or Buzz:</legend>
            <label for="fizz">Fizz:</label>
            <input id="fizz" value="3" />
            <label for="buzz">Buzz:</label>
            <input id="buzz" value="5" />
            <legend>Set range for multiples:</legend>
            <label for="start">Start:</label>
            <input id="start" value="1" />
            <label for="limit">Limit:</label>
            <input id="limit" value="100" />
        <ol id="output"></ol>    

        (() => {
      let fizzInput  = document.getElementById("fizz");
      let buzzInput  = document.getElementById("buzz");
      let startInput = document.getElementById("start");
      let limitInput = document.getElementById("limit");
      let runButton  = document.getElementsByTagName("button")[0];
      let output     = document.getElementById("output");

      runButton.addEventListener("click", function(event){

          let fizz  = fizzInput.value;
          let buzz  = buzzInput.value;
          let start = startInput.value;
          let limit = limitInput.value;

          displayNumbers(fizz, buzz, start, limit);

      const writeLine = (line) => {
        let lineNode = document.createElement("li");
        lineNode.innerText = line;
      const displayNumbers = (fizz, buzz, start, limit) => {

          let index = start;

          do {
              let result = index % fizz === 0 ? "FIZZ" : "";
              result = (index % buzz === 0) ? result + "BUZZ" : result;
              //document.write(`${result ? result : index}<br/>`);
              writeLine(result ? result : index);
          } while(++index <= limit)

    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:

    Ocean Treasures Game

    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


    Popular posts from this blog

    Multi-tap Keypad Text Entry

    HTML5 Crossword 1