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
Settings
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
Comments
Post a Comment