JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<h2>FED Challenge #4</h2>

<p>Complete the two challenges below using <em>as few characters as possible</em>.
    
<h3>FizzBuzz</h3>

    <p>Write some JavaScript that separately (ie, with breaks... see <a href="http://images.pombs.com/fizzbuzzoutput.png">expected output</a>) prints (use console.log) the numbers from 1 to 100. But for multiples of three print &ldquo;Fizz&rdquo; instead of the number and for the multiples of five print &ldquo;Buzz&rdquo;. For numbers which are multiples of both three and five print &ldquo;FizzBuzz&rdquo;. You must not induce global variables.</p>
    
<p><a href="http://images.pombs.com/fizzbuzzoutput.png">Expected Output</a></p>

<h3>Lotto Number Generator</h3>

<p>Write a JavaScript function called getRandomLottoNumbers that generates random lotto numbers. This function has to return an array of six different numbers from 1 to 49 (inclusive) in ascending order. You must not induce global variables.</p>
    
<p>Your function should look like this:</p>
    
<pre>
<code>
var getRandomLottoNumbers = function () {
    // your implementation here
};
</code>
</pre>

<h2>The Rules</h2>

<p>These are classic problems: many solutions are out there. <strong>Do not Google them.</strong> Try your own solutions &ndash; it&rsquo;s the only way this is fun.</p>

<p>The winner(s) will be the person whose <strong>two examples combined</strong> add up to the fewest number of characters <strong>and</strong> fulfill the requirements stated above.</p>

<p>Entries are due by <strong>COB Thursday, September 22nd</strong>.</p>

<p>Please submit your entry to <a href="mailto:[email protected]">[email protected]</a> in the form of a fiddle.</p>

CSS

html {
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #333;
    color: #fff;
    font-family: Lucida Grande, sans-serif;
    font-size: 16px;
}

strong {
    color: hsl(50, 30%, 50%);
    font-weight: bold;
    text-shadow: 1px 1px hsl(0, 0%, 0%);
}

h2, h3, h4 {
    color: hsl(0, 50%, 60%);
    font-family: Futura;
    text-shadow: 1px 1px 0 hsl(0, 50%, 20%);
}

h2 {
    font-size: 36px;
    margin: 0 0 0.444em;
}

h3 {
    font-size: 24px;
    margin: 0 0 0.667em;
}

h4 {
    font-size: 16px;
    margin: 0 0 1em;
}

p {
    margin: 0 0 1em;
}

a {
    color: #ccc;
}