JSFiddle - React, Tailwind, and code Playground

by Tom Randolph

HTML

<p>
  Using Generators, implement a <code>range</code> function.
  <br />
  The <code>range</code> function signature should be:
  <br />
  <code>range( start[, end[, step ] ] )</code>
</p>
<ul>
    <li>
      If only <code>start</code> is passed, it is assumed to be <code>end</code>, and <code>start</code> is <code>1</code>.
    </li>
    <li>
       If <code>step</code> is not provided, it should be <code>1</code>.
    </li>
    <li>
      If <code>end</code> is greater than <code>start</code>, <code>step</code> should be positive, unless explicitly passed.
    </li>
    <li>
      If <code>end</code> is less than <code>start</code>, <code>step</code> should be negative, unless explicitly passed.
    </li>
</ul>

<textarea id="output"></textarea>

<h2>Example solutions</h2>
<table>
  <tr>
    <td>[...range( 3 )]</td>
    <td>1,2,3</td>
  </tr>
  <tr>
    <td>[...range( 1, 3 )]</td>
    <td>1,2,3</td>
  </tr>
  <tr>
    <td>[...range( 3, 1 )]</td>
    <td>3,2,1</td>
  </tr>
  <tr>
    <td>[...range( 1, 5, 2 )]</td>
    <td>1,3,5</td>
  </tr>
  <tr>
    <td>[...range( 1, 5, -1 )]</td>
    <td>1,2,3,4,5</td>
  </tr>
  <tr>
    <td>[...range( 4, 2, 1 )]</td>
    <td>4,3,2</td>
  </tr>
  <tr>
    <td>[...range( -6, -10 )]</td>
    <td>-6,-7,-8,-9,-10</td>
  </tr>
  <tr>
    <td>[...range( 0, 0 )]</td>
    <td>0</td>
  </tr>
  <tr>
    <td>[...range()]</td>
    <td>1</td>
  </tr>
</table>

SCSS

textarea{
  width: 75%;
}

td{
  border: 1px solid #CCCCCC;
  font-family: monospace;
}

JavaScript 1.7

document.getElementById( "output" ).value = "[Some Output]";