diff options
| author | Bill <bill@billserver.senders.io> | 2022-11-04 11:32:22 -0400 |
|---|---|---|
| committer | Bill <bill@billserver.senders.io> | 2022-11-04 11:32:22 -0400 |
| commit | d0b5b23a75801a7fb6cbc38730d7f171793dcf84 (patch) | |
| tree | bf26279e27566856dfaa1fd29ccbccd9fcebd199 /www/dice | |
| parent | f3f798ba45a0f893d3678e5cff9d808065004fc5 (diff) | |
Some updates
Diffstat (limited to 'www/dice')
| -rw-r--r-- | www/dice/index.css | 38 | ||||
| -rw-r--r-- | www/dice/index.html | 86 |
2 files changed, 124 insertions, 0 deletions
diff --git a/www/dice/index.css b/www/dice/index.css new file mode 100644 index 0000000..9c3a8e4 --- /dev/null +++ b/www/dice/index.css @@ -0,0 +1,38 @@ +#numdice { + font-size: 2em; + width: 100px; + text-align: center; +} + +#rollbtn { + font-size: 2em; + padding: 8px 32px; +} + +.output tbody tr:nth-child(even) { + background-color: #e6e6e6; +} + +#history { + min-width: 33%; +} + +.num { + text-align: center; + padding: 0 4px; +} + +tr th { + border-bottom: 1px dotted #444; +} + +#history tr th:nth-child(2), #history tr td:nth-child(2) { + border-right: 1px solid #444; +} + +.footer { + font-size: 0.5em; + text-align: center; + width: 100%; +} + diff --git a/www/dice/index.html b/www/dice/index.html new file mode 100644 index 0000000..078e711 --- /dev/null +++ b/www/dice/index.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> +<html> +<head> + <meta name="generator" content="HTML Tidy for HTML5 for Linux version 5.6.0"> + <meta charset="utf-8"> + <title>senders.io - Dice Roller</title> + <link rel="stylesheet" type="text/css" href="/index.css"> + <link rel="stylesheet" type="text/css" href="./index.css"> + <meta name="viewport" content="width=device-width, initial-scale=1"> +</head> +<body> + <article id="body"> + <h1>Dice Roller</h1> + <p>Set your number of dice and press roll. The output tables will display + the number of count of each result rolled.</p> + <div class='form'> + <input type='number' min="1" max="999" id="numdice" value="4"> + <button id='rollbtn' onclick="roll()">Roll</button> + </div> + <h2>Roll Results</h2> + <table id='results' class='output'> + <thead> + <tr> + <th>Dice Face</th> + <th>Num Rolled</th> + </tr> + </thead> + <tbody id='resbody'></tbody> + </table> + <h2>Roll History</h2> + <table id='history' class='output'> + <thead> + <tr> + <th class='num'>#</th> + <th colspan="2">cnt</th> + <th>1s</th> + <th>2s</th> + <th>3s</th> + <th>4s</th> + <th>5s</th> + <th>6s</th> + </tr> + </thead> + <tbody id='histbody'></tbody> + </table> + </article> + <article class='footer'> + <i>This page uses basic javascript. Nothing external.</i> + </article> + <script> + var numRolls = 0; + + function roll() { + numRolls += 1; + var nI = document.getElementById("numdice"); + var numDice = nI.value; + var results = {}; + results[1] = 0; + results[2] = 0; + results[3] = 0; + results[4] = 0; + results[5] = 0; + results[6] = 0; + for (var i = 0; i < numDice; i++) { + var r = Math.floor((Math.random() * 100) % 6) + 1; + results[r] += 1; + } + display(results, numDice); + } + + function display(res, numDice) { + var resBody = document.getElementById("resbody"); + var histBody = document.getElementById("histbody"); + resHTML = ""; + histHTML = `<tr><td class='num'>${numRolls}</td><td colspan=2>${numDice}</td>`; + for (var i = 1; i <= 6; i++) { + resHTML += `<tr><td>${i}</td><td>${res[i]}</td></tr>`; + histHTML += `<td>${res[i]}</td>`; + } + histHTML += "</tr>"; + histBody.innerHTML = histHTML + histBody.innerHTML; + resBody.innerHTML = resHTML; + } + </script> +</body> +</html> |