Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Random Item from Array</title>
</head>
<body>
<h3>Round up or down?</h3>
<label for="round-up">
    <input type="radio" name="round" value="up" id="round-up">
    <span>Up</span>
</label>
<label for="round-down">
    <input type="radio" name="round" value="down" id="round-down" checked>
    <span>Down</span>
</label>
<div>
<pre id='code'>
<span class='p'>var</span> colorsArray = [
    <span class="r">"red"</span>,
    <span class="r">"orange"</span>,
    <span class="r">"yellow"</span>,
    <span class="r">"green"</span>,
    <span class="r">"blue"</span>,
];

<span class='o'>// Generates a random decimal number between 0 and 1.</span>
<span class='p'>var</span> randomNumber = Math.random();

<span class='o'>// Multiply `randomNumber` by the array length to get</span>
<span class='o'>// a random decimal number between 0 and "array length".</span>
<span class='p'>var</span> unroundedArrayIndex = randomNumber * colorsArray.length;

<span class='o'>// Since a decimal is not a valid array index,</span>
<span class='o'>// round the random array index to a whole number.</span>
<span class='p'>var</span> arrayIndex = Math.<span class='round-fn'>floor</span>(unroundedArrayIndex);

colorsArray[arrayIndex];
</pre>
<pre>


<span class="b random-number"></span>


<span class="b random-number"></span> * <span class="b" id="array-length"></span> === <span class="b unrounded-array-index"></span>


Math.<span class="round-fn"></span>(<span class="b unrounded-array-index"></span>) === <span class="b array-index"></span>

colorsArray[<span class="b array-index"></span>] === <span id="index-value"></span>
</pre>
</div>
<button id="refresh">Run it again</button>
</body>
</html>