The latest articles on DEV Community by Yes or No Random Generator (@yesorno_randomgenerator_1). https://dev.to/yesorno_randomgenerator_1 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4208688%2F07ecd368-39b5-41ff-87ce-691d1890f1b8.png https://dev.to/yesorno_randomgenerator_1 en Yes or No Random Generator Mon, 26 Oct 2026 12:46:03 +0000 https://dev.to/yesorno_randomgenerator_1/how-to-build-a-fair-yesno-spinning-wheel-with-javascript-4715 https://dev.to/yesorno_randomgenerator_1/how-to-build-a-fair-yesno-spinning-wheel-with-javascript-4715 <p>Can't decide? Let a wheel do it. In this post I'll show you how to build a Yes/No spinning wheel with plain JavaScript, no libraries, and why <code>Math.random()</code> isn't the best choice for it.</p> <p>I built a bigger version of this for my site, a free <a href="https://yesornorandomgenerator.com/" rel="noopener noreferrer">Yes or No Random Generator</a>, and this is a simplified version you can copy and learn from.</p> <h2> What we're building </h2> <ul> <li>A wheel with 8 equal slices (4 Yes, 4 No)</li> <li>A spin animation made with CSS</li> <li>A fair 50/50 result using the Web Crypto API</li> </ul> <h2> Why not Math.random()? </h2> <p><code>Math.random()</code> works for casual use, but browsers also give us <code>crypto.getRandomValues()</code>, which is designed to be unpredictable. For a decision tool it costs nothing extra, so I use it.</p> <p>One catch: if you turn a random number into a range with <code>%</code>, some results can come up slightly more often. This helper avoids that:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight javascript"><code><span class="kd">function</span> <span class="nf">secureRandomInt</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">limit</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">floor</span><span class="p">(</span><span class="mh">0x100000000</span> <span class="o">/</span> <span class="nx">max</span><span class="p">)</span> <span class="o">*</span> <span class="nx">max</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">buf</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Uint32Array</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="k">do</span> <span class="p">{</span> <span class="nx">crypto</span><span class="p">.</span><span class="nf">getRandomValues</span><span class="p">(</span><span class="nx">buf</span><span class="p">);</span> <span class="p">}</span> <span class="k">while </span><span class="p">(</span><span class="nx">buf</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&gt;=</span> <span class="nx">limit</span><span class="p">);</span> <span class="k">return</span> <span class="nx">buf</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">%</span> <span class="nx">max</span><span class="p">;</span> <span class="p">}</span> </code></pre> </div> <p>It throws away values that would make some numbers more likely, so every slice has an equal chance.</p> <h2> The trick: pick the answer first, then animate </h2> <p>A common mistake is to spin the wheel by a random angle and then read what's under the pointer. It's easier and more reliable to <strong>pick the result first</strong>, then rotate the wheel so that slice lands under the pointer.</p> <h2> The full code </h2> <p>Save this as <code>index.html</code> and open it in your browser:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight html"><code><span class="cp">&lt;!DOCTYPE html&gt;</span> <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span> <span class="nt">&lt;head&gt;</span> <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span> <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1"</span><span class="nt">&gt;</span> <span class="nt">&lt;title&gt;</span>Yes or No Wheel<span class="nt">&lt;/title&gt;</span> <span class="nt">&lt;style&gt;</span> <span class="nt">body</span> <span class="p">{</span> <span class="nl">font-family</span><span class="p">:</span> <span class="n">Arial</span><span class="p">,</span> <span class="nb">sans-serif</span><span class="p">;</span> <span class="nl">text-align</span><span class="p">:</span> <span class="nb">center</span><span class="p">;</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">40px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#f4f6f8</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.wrap</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">relative</span><span class="p">;</span> <span class="nl">width</span><span class="p">:</span> <span class="m">260px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">30px</span> <span class="nb">auto</span><span class="p">;</span> <span class="p">}</span> <span class="nc">.pointer</span> <span class="p">{</span> <span class="nl">position</span><span class="p">:</span> <span class="nb">absolute</span><span class="p">;</span> <span class="nl">top</span><span class="p">:</span> <span class="m">-16px</span><span class="p">;</span> <span class="nl">left</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">transform</span><span class="p">:</span> <span class="nf">translateX</span><span class="p">(</span><span class="m">-50%</span><span class="p">);</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">28px</span><span class="p">;</span> <span class="nl">z-index</span><span class="p">:</span> <span class="m">2</span><span class="p">;</span> <span class="p">}</span> <span class="nf">#wheel</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">260px</span><span class="p">;</span> <span class="nl">height</span><span class="p">:</span> <span class="m">260px</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">50%</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">6px</span> <span class="nb">solid</span> <span class="nx">#1f2937</span><span class="p">;</span> <span class="nl">transition</span><span class="p">:</span> <span class="n">transform</span> <span class="m">4s</span> <span class="nf">cubic-bezier</span><span class="p">(</span><span class="m">.17</span><span class="p">,</span> <span class="m">.67</span><span class="p">,</span> <span class="m">.12</span><span class="p">,</span> <span class="m">.99</span><span class="p">);</span> <span class="p">}</span> <span class="nf">#result</span> <span class="p">{</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">48px</span><span class="p">;</span> <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span><span class="p">;</span> <span class="nl">min-height</span><span class="p">:</span> <span class="m">60px</span><span class="p">;</span> <span class="nl">margin</span><span class="p">:</span> <span class="m">20px</span> <span class="m">0</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span> <span class="p">{</span> <span class="nl">padding</span><span class="p">:</span> <span class="m">12px</span> <span class="m">28px</span><span class="p">;</span> <span class="nl">font-size</span><span class="p">:</span> <span class="m">18px</span><span class="p">;</span> <span class="nl">background</span><span class="p">:</span> <span class="nx">#2563eb</span><span class="p">;</span> <span class="nl">color</span><span class="p">:</span> <span class="nx">#fff</span><span class="p">;</span> <span class="nl">border</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span> <span class="nl">border-radius</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="nb">pointer</span><span class="p">;</span> <span class="p">}</span> <span class="nt">button</span><span class="nd">:disabled</span> <span class="p">{</span> <span class="nl">opacity</span><span class="p">:</span> <span class="m">.5</span><span class="p">;</span> <span class="nl">cursor</span><span class="p">:</span> <span class="n">not-allowed</span><span class="p">;</span> <span class="p">}</span> <span class="nt">&lt;/style&gt;</span> <span class="nt">&lt;/head&gt;</span> <span class="nt">&lt;body&gt;</span> <span class="nt">&lt;h1&gt;</span>Yes or No Wheel<span class="nt">&lt;/h1&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"wrap"</span><span class="nt">&gt;</span> <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"pointer"</span><span class="nt">&gt;</span><span class="ni">&amp;#9660;</span><span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"wheel"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;/div&gt;</span> <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"result"</span><span class="nt">&gt;&lt;/div&gt;</span> <span class="nt">&lt;button</span> <span class="na">id=</span><span class="s">"spin"</span><span class="nt">&gt;</span>SPIN<span class="nt">&lt;/button&gt;</span> <span class="nt">&lt;script&gt;</span> <span class="kd">const</span> <span class="nx">wheel</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">wheel</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">result</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">spin</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">SLICES</span> <span class="o">=</span> <span class="mi">8</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">SIZE</span> <span class="o">=</span> <span class="mi">360</span> <span class="o">/</span> <span class="nx">SLICES</span><span class="p">;</span> <span class="c1">// Build the wheel colors: even slices = Yes (green), odd = No (red)</span> <span class="kd">const</span> <span class="nx">stops</span> <span class="o">=</span> <span class="p">[];</span> <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">SLICES</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">color</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">#16a34a</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">#dc2626</span><span class="dl">'</span><span class="p">;</span> <span class="nx">stops</span><span class="p">.</span><span class="nf">push</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">color</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">i</span> <span class="o">*</span> <span class="nx">SIZE</span><span class="p">}</span><span class="s2">deg </span><span class="p">${(</span><span class="nx">i</span> <span class="o">+</span> <span class="mi">1</span><span class="p">)</span> <span class="o">*</span> <span class="nx">SIZE</span><span class="p">}</span><span class="s2">deg`</span><span class="p">);</span> <span class="p">}</span> <span class="nx">wheel</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">background</span> <span class="o">=</span> <span class="s2">`conic-gradient(</span><span class="p">${</span><span class="nx">stops</span><span class="p">.</span><span class="nf">join</span><span class="p">(</span><span class="dl">'</span><span class="s1">,</span><span class="dl">'</span><span class="p">)}</span><span class="s2">)`</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">secureRandomInt</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">limit</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">floor</span><span class="p">(</span><span class="mh">0x100000000</span> <span class="o">/</span> <span class="nx">max</span><span class="p">)</span> <span class="o">*</span> <span class="nx">max</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">buf</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Uint32Array</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span> <span class="k">do</span> <span class="p">{</span> <span class="nx">crypto</span><span class="p">.</span><span class="nf">getRandomValues</span><span class="p">(</span><span class="nx">buf</span><span class="p">);</span> <span class="p">}</span> <span class="k">while </span><span class="p">(</span><span class="nx">buf</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">&gt;=</span> <span class="nx">limit</span><span class="p">);</span> <span class="k">return</span> <span class="nx">buf</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="o">%</span> <span class="nx">max</span><span class="p">;</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">rotation</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">button</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">button</span><span class="p">.</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="nx">result</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="c1">// 1. Pick the winning slice first</span> <span class="kd">const</span> <span class="nx">index</span> <span class="o">=</span> <span class="nf">secureRandomInt</span><span class="p">(</span><span class="nx">SLICES</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">answer</span> <span class="o">=</span> <span class="nx">index</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">===</span> <span class="mi">0</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">YES</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">NO</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// 2. Work out the angle that puts that slice under the pointer</span> <span class="kd">const</span> <span class="nx">sliceCenter</span> <span class="o">=</span> <span class="nx">index</span> <span class="o">*</span> <span class="nx">SIZE</span> <span class="o">+</span> <span class="nx">SIZE</span> <span class="o">/</span> <span class="mi">2</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">target</span> <span class="o">=</span> <span class="p">(</span><span class="mi">360</span> <span class="o">-</span> <span class="nx">sliceCenter</span> <span class="o">+</span> <span class="mi">360</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">delta</span> <span class="o">=</span> <span class="p">(</span><span class="nx">target</span> <span class="o">-</span> <span class="p">(</span><span class="nx">rotation</span> <span class="o">%</span> <span class="mi">360</span><span class="p">)</span> <span class="o">+</span> <span class="mi">360</span><span class="p">)</span> <span class="o">%</span> <span class="mi">360</span><span class="p">;</span> <span class="c1">// 3. Spin 5 full turns plus the extra angle</span> <span class="nx">rotation</span> <span class="o">+=</span> <span class="mi">360</span> <span class="o">*</span> <span class="mi">5</span> <span class="o">+</span> <span class="nx">delta</span><span class="p">;</span> <span class="nx">wheel</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">transform</span> <span class="o">=</span> <span class="s2">`rotate(</span><span class="p">${</span><span class="nx">rotation</span><span class="p">}</span><span class="s2">deg)`</span><span class="p">;</span> <span class="nx">wheel</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">transitionend</span><span class="dl">'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="nx">result</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">answer</span><span class="p">;</span> <span class="nx">result</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">color</span> <span class="o">=</span> <span class="nx">answer</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">YES</span><span class="dl">'</span> <span class="p">?</span> <span class="dl">'</span><span class="s1">#16a34a</span><span class="dl">'</span> <span class="p">:</span> <span class="dl">'</span><span class="s1">#dc2626</span><span class="dl">'</span><span class="p">;</span> <span class="nx">button</span><span class="p">.</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span> <span class="p">},</span> <span class="p">{</span> <span class="na">once</span><span class="p">:</span> <span class="kc">true</span> <span class="p">});</span> <span class="p">});</span> <span class="nt">&lt;/script&gt;</span> <span class="nt">&lt;/body&gt;</span> <span class="nt">&lt;/html&gt;</span> </code></pre> </div> <h2> How it works </h2> <ol> <li> <code>conic-gradient</code> paints 8 equal slices, alternating green and red.</li> <li> <code>secureRandomInt(8)</code> picks the winning slice, so Yes and No each have exactly 4 slices out of 8, a true 50/50.</li> <li>We calculate the rotation that places the middle of that slice under the pointer at the top.</li> <li>CSS <code>transition</code> handles the smooth spin, and <code>transitionend</code> shows the answer when it stops.</li> </ol> <h2> Fair, not rigged </h2> <p>Because the result is chosen before the animation and the slices are equal, the wheel is fair. A streak of five Yes answers doesn't make a No more likely. Each spin is independent.</p> <h2> Try it </h2> <ul> <li>Live demo with card, wheel and quick modes: <a href="https://yesornorandomgenerator.com/" rel="noopener noreferrer">yesornorandomgenerator.com</a> </li> <li>Source: <a href="https://github.com/yesornorandomgenerator/Yes-or-No-Random-Generator" rel="noopener noreferrer">GitHub repo</a> </li> </ul> <p>If you build something with it, such as a classroom picker or a Discord command, I'd love to see it in the comments.</p> javascript webdev beginners tutorial