Dice Roller<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n touch-action: manipulation;\n margin: 0;\n }\n\n .input-form {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n margin-bottom: 10px;\n width: 100%;\n max-width: 300px;\n }\n\n .input-form label,\n .input-form input {\n flex: 1;\n margin: 5px;\n padding: 10px;\n font-size: 1.2em;\n width: 100%;\n }\n\n .input-form input {\n text-align: center;\n }\n\n .dice-roller {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n }\n\n .dice {\n margin: 10px;\n padding: 20px;\n font-size: 1.5em;\n cursor: pointer;\n }\n\n .history {\n width: 90%;\n max-width: 400px;\n margin: 20px 0;\n padding: 10px;\n border: 1px solid #000;\n background-color: #fff;\n max-height: 300px;\n overflow-y: auto;\n font-size: 1.5em;\n }\n\n .clear-history {\n margin-top: 10px;\n font-size: 1.2em;\n padding: 10px;\n font-weight: normal;\n width: 100%;\n }\n\n p {\n text-align: center;\n width: 95%;\n max-width: 800px;\n font-size: 1.2em;\n }\n\n .custom-roll {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n margin-top: 10px;\n }\n\n .custom-roll input,\n .custom-roll button {\n margin: 5px;\n padding: 10px;\n font-size: 1.2em;\n width: 100%;\n }\n div.c1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Dice Roller<\/h1>\n <form class=\"input-form\">\n <div class=\"c1\">\n <label for=\"dice\">Dice<\/label>\n <input type=\"number\" id=\"dice\" name=\"dice\" value=\"1\">\n <\/div>\n <div class=\"c1\">\n <label for=\"modifier\">Mod<\/label>\n <input type=\"number\" id=\"modifier\" name=\"modifier\" value=\"0\">\n <\/div>\n <\/form>\n <div class=\"dice-roller\">\n <button class=\"dice\" data-sides=\"4\">D4<\/button>\n <button class=\"dice\" data-sides=\"6\">D6<\/button>\n <button class=\"dice\" data-sides=\"8\">D8<\/button>\n <button class=\"dice\" data-sides=\"10\">D10<\/button>\n <button class=\"dice\" data-sides=\"12\">D12<\/button>\n <button class=\"dice\" data-sides=\"20\">D20<\/button>\n <button class=\"dice\" data-sides=\"100\">D100<\/button>\n <\/div>\n <div class=\"custom-roll\">\n <input type=\"number\" id=\"custom-sides\" name=\"custom-sides\" value=\"3\" min=\"2\">\n <button type=\"button\" class=\"roll-custom-dice\">Custom<\/button>\n <\/div>\n <form class=\"input-form\">\n <button type=\"button\" class=\"clear-history\">Clear History<\/button>\n <\/form>\n <div class=\"history\" id=\"history\"><\/div>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const diceButtons = document.querySelectorAll('.dice');\n const history = document.getElementById('history');\n const diceForm = document.querySelector('.input-form');\n const clearHistoryBtn = document.querySelector('.clear-history');\n const rollCustomDiceBtn = document.querySelector('.roll-custom-dice');\n const customSidesInput = document.getElementById('custom-sides');\n const diceSidesInput = document.querySelector('[name=\"dice\"]');\n\n diceButtons.forEach(button => {\n button.addEventListener('click', () => {\n const sides = parseInt(button.dataset.sides);\n let rolls = diceForm.elements.dice.value;\n let modifier = diceForm.elements.modifier.value;\n rolls = parseInt(rolls) || 1;\n modifier = parseInt(modifier) || 0;\n let rollsArray = [];\n let total = 0;\n for (let i = 0; i < rolls; i++) {\n let roll = Math.floor(Math.random() * sides) + 1;\n rollsArray.push(roll);\n total += roll;\n }\n total += modifier;\n let rollStr = `${rolls}d${sides}`;\n if (rolls > 1) {\n rollStr += ` (${rollsArray.join(', ')})`;\n }\n if (modifier !== 0) {\n rollStr += ` + ${modifier}`;\n }\n rollStr += ` = ${total}`;\n rollStr += `<br>`;\n history.innerHTML = rollStr + history.innerHTML;\n history.scrollTop = 0;\n });\n });\n\n clearHistoryBtn.addEventListener('click', () => {\n history.innerHTML = '';\n });\n\n rollCustomDiceBtn.addEventListener('click', () => {\n let rolls = parseInt(diceForm.elements.dice.value) || 1;\n let modifier = parseInt(diceForm.elements.modifier.value) || 0;\n let sides = parseInt(customSidesInput.value) || 10;\n let rollsArray = [];\n let total = 0;\n for (let i = 0; i < rolls; i++) {\n let roll = Math.floor(Math.random() * sides) + 1;\n rollsArray.push(roll);\n total += roll;\n }\n total += modifier;\n let rollStr = `${rolls}d${sides}`;\n if (rolls > 1) {\n rollStr += ` (${rollsArray.join(', ')})`;\n }\n if (modifier !== 0) {\n rollStr += ` + ${modifier}`;\n }\n rollStr += ` = ${total}`;\n if (rolls > 1) {\n rollStr += ` (${total - modifier})`;\n }\n rollStr += `<br>`;\n history.innerHTML = rollStr + history.innerHTML;\n history.scrollTop = 0;\n });\n });\n <\/script>\n <p>This tool is released under a <a href=\"https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/\">CC0 1.0 Universal<\/a> license. You can copy, modify, and distribute this tool, even for commercial purposes, all without asking permission. <a href=\"dice_roller.zip\">Download this tool<\/a> or <a href=\"https:\/\/github.com\/mshea\/lazy_gm_tools\/tree\/main\/dice_roller\">fork it on Github<\/a>.<\/p>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dice Roller Dice Roller Dice Mod D4 D6 D8 D10 D12 D20 D100 Custom Clear History This tool is released under a CC0 1.0 Universal license. You can copy, modify, and distribute this tool, even for commercial purposes, all without asking permission. Download this tool or fork it on Github.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-437","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":3,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":440,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions\/440"}],"wp:attachment":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":437,"date":"2025-01-01T14:26:00","date_gmt":"2025-01-01T14:26:00","guid":{"rendered":"https:\/\/blog.wyrdingmedia.org\/?page_id=437"},"modified":"2025-01-01T14:31:41","modified_gmt":"2025-01-01T14:31:41","slug":"tools","status":"publish","type":"page","link":"https:\/\/blog.wyrdingmedia.org\/index.php\/tools\/","title":{"rendered":"Tools"},"content":{"rendered":"\n\n\n\n \n \n Dice Roller<\/title>\n <style>\n body {\n font-family: Arial, sans-serif;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n touch-action: manipulation;\n margin: 0;\n }\n\n .input-form {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n margin-bottom: 10px;\n width: 100%;\n max-width: 300px;\n }\n\n .input-form label,\n .input-form input {\n flex: 1;\n margin: 5px;\n padding: 10px;\n font-size: 1.2em;\n width: 100%;\n }\n\n .input-form input {\n text-align: center;\n }\n\n .dice-roller {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n }\n\n .dice {\n margin: 10px;\n padding: 20px;\n font-size: 1.5em;\n cursor: pointer;\n }\n\n .history {\n width: 90%;\n max-width: 400px;\n margin: 20px 0;\n padding: 10px;\n border: 1px solid #000;\n background-color: #fff;\n max-height: 300px;\n overflow-y: auto;\n font-size: 1.5em;\n }\n\n .clear-history {\n margin-top: 10px;\n font-size: 1.2em;\n padding: 10px;\n font-weight: normal;\n width: 100%;\n }\n\n p {\n text-align: center;\n width: 95%;\n max-width: 800px;\n font-size: 1.2em;\n }\n\n .custom-roll {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n margin-top: 10px;\n }\n\n .custom-roll input,\n .custom-roll button {\n margin: 5px;\n padding: 10px;\n font-size: 1.2em;\n width: 100%;\n }\n div.c1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n }\n <\/style>\n<\/head>\n<body>\n <h1>Dice Roller<\/h1>\n <form class=\"input-form\">\n <div class=\"c1\">\n <label for=\"dice\">Dice<\/label>\n <input type=\"number\" id=\"dice\" name=\"dice\" value=\"1\">\n <\/div>\n <div class=\"c1\">\n <label for=\"modifier\">Mod<\/label>\n <input type=\"number\" id=\"modifier\" name=\"modifier\" value=\"0\">\n <\/div>\n <\/form>\n <div class=\"dice-roller\">\n <button class=\"dice\" data-sides=\"4\">D4<\/button>\n <button class=\"dice\" data-sides=\"6\">D6<\/button>\n <button class=\"dice\" data-sides=\"8\">D8<\/button>\n <button class=\"dice\" data-sides=\"10\">D10<\/button>\n <button class=\"dice\" data-sides=\"12\">D12<\/button>\n <button class=\"dice\" data-sides=\"20\">D20<\/button>\n <button class=\"dice\" data-sides=\"100\">D100<\/button>\n <\/div>\n <div class=\"custom-roll\">\n <input type=\"number\" id=\"custom-sides\" name=\"custom-sides\" value=\"3\" min=\"2\">\n <button type=\"button\" class=\"roll-custom-dice\">Custom<\/button>\n <\/div>\n <form class=\"input-form\">\n <button type=\"button\" class=\"clear-history\">Clear History<\/button>\n <\/form>\n <div class=\"history\" id=\"history\"><\/div>\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const diceButtons = document.querySelectorAll('.dice');\n const history = document.getElementById('history');\n const diceForm = document.querySelector('.input-form');\n const clearHistoryBtn = document.querySelector('.clear-history');\n const rollCustomDiceBtn = document.querySelector('.roll-custom-dice');\n const customSidesInput = document.getElementById('custom-sides');\n const diceSidesInput = document.querySelector('[name=\"dice\"]');\n\n diceButtons.forEach(button => {\n button.addEventListener('click', () => {\n const sides = parseInt(button.dataset.sides);\n let rolls = diceForm.elements.dice.value;\n let modifier = diceForm.elements.modifier.value;\n rolls = parseInt(rolls) || 1;\n modifier = parseInt(modifier) || 0;\n let rollsArray = [];\n let total = 0;\n for (let i = 0; i < rolls; i++) {\n let roll = Math.floor(Math.random() * sides) + 1;\n rollsArray.push(roll);\n total += roll;\n }\n total += modifier;\n let rollStr = `${rolls}d${sides}`;\n if (rolls > 1) {\n rollStr += ` (${rollsArray.join(', ')})`;\n }\n if (modifier !== 0) {\n rollStr += ` + ${modifier}`;\n }\n rollStr += ` = ${total}`;\n rollStr += `<br>`;\n history.innerHTML = rollStr + history.innerHTML;\n history.scrollTop = 0;\n });\n });\n\n clearHistoryBtn.addEventListener('click', () => {\n history.innerHTML = '';\n });\n\n rollCustomDiceBtn.addEventListener('click', () => {\n let rolls = parseInt(diceForm.elements.dice.value) || 1;\n let modifier = parseInt(diceForm.elements.modifier.value) || 0;\n let sides = parseInt(customSidesInput.value) || 10;\n let rollsArray = [];\n let total = 0;\n for (let i = 0; i < rolls; i++) {\n let roll = Math.floor(Math.random() * sides) + 1;\n rollsArray.push(roll);\n total += roll;\n }\n total += modifier;\n let rollStr = `${rolls}d${sides}`;\n if (rolls > 1) {\n rollStr += ` (${rollsArray.join(', ')})`;\n }\n if (modifier !== 0) {\n rollStr += ` + ${modifier}`;\n }\n rollStr += ` = ${total}`;\n if (rolls > 1) {\n rollStr += ` (${total - modifier})`;\n }\n rollStr += `<br>`;\n history.innerHTML = rollStr + history.innerHTML;\n history.scrollTop = 0;\n });\n });\n <\/script>\n <p>This tool is released under a <a href=\"https:\/\/creativecommons.org\/publicdomain\/zero\/1.0\/\">CC0 1.0 Universal<\/a> license. You can copy, modify, and distribute this tool, even for commercial purposes, all without asking permission. <a href=\"dice_roller.zip\">Download this tool<\/a> or <a href=\"https:\/\/github.com\/mshea\/lazy_gm_tools\/tree\/main\/dice_roller\">fork it on Github<\/a>.<\/p>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dice Roller Dice Roller Dice Mod D4 D6 D8 D10 D12 D20 D100 Custom Clear History This tool is released under a CC0 1.0 Universal license. You can copy, modify, and distribute this tool, even for commercial purposes, all without asking permission. Download this tool or fork it on Github.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-437","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages\/437","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/comments?post=437"}],"version-history":[{"count":3,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions"}],"predecessor-version":[{"id":440,"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/pages\/437\/revisions\/440"}],"wp:attachment":[{"href":"https:\/\/blog.wyrdingmedia.org\/index.php\/wp-json\/wp\/v2\/media?parent=437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}