toolbox/dice-roller.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Dice Roller — Virtual Dice Simulator</title>
  <meta name="description" content="Roll virtual dice: D4, D6, D8, D10, D12, D20, and D100. Multiple dice, modifiers, and roll history. Perfect for tabletop RPGs. Free online dice roller.">
  <link rel="canonical" href="https://www.quicktools.mom/dice-roller.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/dice-roller.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Dice Roller free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Dice Roller is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Dice Roller?","acceptedAnswer":{"@type":"Answer","text":"Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output."}},{"@type":"Question","name":"Is my data safe with Dice Roller?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Dice Roller runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header"><div class="tool-badge">🎲 Random</div><h1>Dice Roller</h1><p>Roll virtual dice for tabletop RPGs. D4-D100, multiple dice, modifiers.</p></div>
    <div class="tool-card" style="text-align:center;">
      <div id="result" style="font-size:5rem;font-weight:700;color:var(--accent-hover);min-height:5rem;line-height:1;">🎲</div>
      <div id="breakdown" class="text-muted" style="font-size:0.85rem;min-height:1.5rem;"></div>
    </div>
    <div class="tool-card">
      <div class="controls-row">
        <div class="control-group"><label>Number of Dice</label><input type="number" id="count" value="2" min="1" max="20" style="text-align:center;font-size:1.1rem;"></div>
        <div class="control-group"><label>Die Type</label><select id="sides" style="font-size:1.1rem;"><option value="4">D4</option><option value="6" selected>D6</option><option value="8">D8</option><option value="10">D10</option><option value="12">D12</option><option value="20">D20</option><option value="100">D100</option></select></div>
        <div class="control-group"><label>Modifier</label><input type="number" id="mod" value="0" style="text-align:center;font-size:1.1rem;"></div>
      </div>
      <div style="display:flex;gap:0.3rem;flex-wrap:wrap;margin-top:0.75rem;justify-content:center;">
        <button class="btn btn-secondary" onclick="quick(1,6,0)" style="font-size:0.75rem;">1d6</button>
        <button class="btn btn-secondary" onclick="quick(2,6,0)" style="font-size:0.75rem;">2d6</button>
        <button class="btn btn-secondary" onclick="quick(1,20,0)" style="font-size:0.75rem;">1d20</button>
        <button class="btn btn-secondary" onclick="quick(1,20,5)" style="font-size:0.75rem;">1d20+5</button>
        <button class="btn btn-secondary" onclick="quick(3,6,0)" style="font-size:0.75rem;">3d6</button>
        <button class="btn btn-secondary" onclick="quick(4,6,0)" style="font-size:0.75rem;">4d6</button>
        <button class="btn btn-secondary" onclick="quick(2,10,0)" style="font-size:0.75rem;">2d10</button>
        <button class="btn btn-secondary" onclick="quick(1,100,0)" style="font-size:0.75rem;">D100</button>
      </div>
      <button class="btn btn-primary mt-2" onclick="roll()" style="font-size:1.1rem;padding:0.75rem 3rem;width:100%;">🎲 Roll!</button>
    </div>
    <div class="tool-card">
      <div class="stats-bar">
        <div class="stat-item"><span class="stat-value" id="rolls">0</span><span class="stat-label">Total Rolls</span></div>
        <div class="stat-item"><span class="stat-value" id="avg">0</span><span class="stat-label">Average</span></div>
        <div class="stat-item"><span class="stat-value" id="highest" style="color:var(--success);">0</span><span class="stat-label">Highest</span></div>
        <div class="stat-item"><span class="stat-value" id="lowest" style="color:var(--danger);">0</span><span class="stat-label">Lowest</span></div>
      </div>
      <h3 style="font-size:0.95rem;margin:1rem 0 0.5rem;">📜 Roll History</h3>
      <div id="history" style="max-height:200px;overflow-y:auto;font-size:0.82rem;"></div>
      <button class="btn btn-secondary mt-1" onclick="clearHist()" style="font-size:0.75rem;">Clear History</button>
    </div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="coin-flip.html"><span class="tool-icon">🪙</span> Coin Flip</a><a href="random-generator.html"><span class="tool-icon">🎲</span> Random Generator</a><a href="password-generator.html"><span class="tool-icon">🔐</span> Password</a><a href="uuid-generator.html"><span class="tool-icon">🔑</span> UUID</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Dice Roller</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Dice Roller is a free, browser-based tool designed for developers, designers, writers, and everyday users. Roll virtual dice: D4, D6, D8, D10, D12, D20, and D100. Multiple dice, modifiers, and roll history. Perfect for tabletop RPGs. Free online dice roller. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Dice Roller free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Dice Roller is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Dice Roller?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Dice Roller?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Dice Roller runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    let hist=[],allTotals=[];
    function quick(n,s,m){document.getElementById('count').value=n;document.getElementById('sides').value=s;document.getElementById('mod').value=m;roll();}
    function roll(){
      const n=+document.getElementById('count').value;const s=+document.getElementById('sides').value;const m=+document.getElementById('mod').value;
      const dice=[];for(let i=0;i<n;i++)dice.push(Math.floor(Math.random()*s)+1);
      const total=dice.reduce((a,b)=>a+b,0)+m;allTotals.push(total);
      document.getElementById('result').textContent=total;document.getElementById('result').style.animation='none';document.getElementById('result').offsetHeight;document.getElementById('result').style.animation='';
      let bd=`${n}d${s}`;if(n>1)bd+=` [${dice.join(', ')}]`;if(m)bd+=` ${m>0?'+':''}${m}`;
      document.getElementById('breakdown').textContent=bd;
      hist.unshift({dice:bd,total,time:new Date().toLocaleTimeString()});
      updateStats();
    }
    function updateStats(){
      document.getElementById('rolls').textContent=allTotals.length;
      document.getElementById('avg').textContent=allTotals.length?(allTotals.reduce((a,b)=>a+b,0)/allTotals.length).toFixed(1):'0';
      document.getElementById('highest').textContent=allTotals.length?Math.max(...allTotals):'0';
      document.getElementById('lowest').textContent=allTotals.length?Math.min(...allTotals):'0';
      document.getElementById('history').innerHTML=hist.slice(0,50).map(h=>`<div style="display:flex;justify-content:space-between;padding:0.3rem 0;border-bottom:1px solid var(--border);"><span class="text-muted">${h.time}</span><span>${h.dice}</span><span style="font-weight:700;color:var(--accent-hover);">${h.total}</span></div>`).join('');
    }
    function clearHist(){hist=[];allTotals=[];document.getElementById('result').textContent='🎲';document.getElementById('breakdown').textContent='';updateStats();}
  </script>
<script src="ads.js"></script>
</body>
</html>