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

FizzBuzz Challenge

Settings

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

Output:




    Source Code


    HTML with CSS and JavaScript


    <!DOCTYPE html>
    <html>
      <head>
        <title>FizzBuzz</title>
    <style>
         body {
      background-color: lightblue;
    }
    </style>
      </head>
      <body>
        <h1>FizzBuzz Challenge</h1>
        <h2>Settings</h2>
        <form>
          <fieldset>
            <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" />
          </fieldset>
          <fieldset>
            <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" />
          </fieldset>
          <button>Run</button>     
        </form>
        <h2>Output:</h2>
        <ol id="output"></ol>    

    <script>
        (() => {
      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){

          event.preventDefault();
        
          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;
        output.appendChild(lineNode);
      }
      
      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)
      }
    })();
    </script>
      </body>


    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





    Comments

    Popular posts from this blog