fizzbuzz.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FizzBuzz!</title>
    <script src="scripts/auto-theme.js"></script>
    <script src="https://embed.runkit.com"></script>
    <link href="https://fonts.googleapis.com/css?family=Merriweather%7CLato" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>

<body class="wide">
    <nav>
        <h1>FizzBuzz!</h1>
        <p><a href="https://runkit.com/willwm/fizzbuzz">runkit.com/willwm/fizzbuzz</a></p>

        <code id="runkit">            
        </code>
    </nav>

    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const fizzbuzz = document.getElementById('fizzbuzz');

            const notebook = RunKit.createNotebook({
                // the parent element for the new notebook
                element: document.getElementById("runkit"),
                // specify the source of the notebook
                source: fizzbuzz.textContent,
            })
        });
    </script>

    <!-- FizzBuzz implementation -->
    <script id="fizzbuzz">
        // Based on FizzBuzz description from: https://en.wikipedia.org/wiki/Fizz_buzz
        function fizzbuzz(val) {
            let output = '';

            if (val % 3 === 0) { output += 'Fizz'; }
            if (val % 5 === 0) { output += 'Buzz'; }

            if (output === '') { output = `${val}`; }

            return output;
        }

        function runner(iterations) {
            for (i = 1; i <= iterations; i++) {
                const result = fizzbuzz(i);
                console.log(`${i}: ${result}`);
            }
        }

        runner(100);
    </script>

</body>

</html>