Dice Roller with Python using either tkinter or streamlit
the code on the website is javascript here it is, make sure to create dice images for it to work (e.g dice1.png):
<span style="color:#323232;">
</span><span style="color:#323232;"><html lang="en">
</span><span style="color:#323232;"><head>
</span><span style="color:#323232;"><meta charset="UTF-8">
</span><span style="color:#323232;"><meta name="viewport" content="width=device-width, initial-scale=1.0">
</span><span style="color:#323232;"><title>Dice Roller</title>
</span><span style="color:#323232;"><style>
</span><span style="color:#323232;"> body {
</span><span style="color:#323232;"> font-family: Arial, sans-serif;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"> #result-frame {
</span><span style="color:#323232;"> margin-top: 20px;
</span><span style="color:#323232;"> }
</span><span style="color:#323232;"></style>
</span><span style="color:#323232;"></head>
</span><span style="color:#323232;"><body>
</span><span style="color:#323232;"><h2>Dice Roller</h2>
</span><span style="color:#323232;"><label for="num-dice">Choose Number of Dice:</label><br><br>
</span><span style="color:#323232;"><select id="num-dice">
</span><span style="color:#323232;"> <option value="1">1</option>
</span><span style="color:#323232;"> <option value="2">2</option>
</span><span style="color:#323232;"> <option value="3">3</option>
</span><span style="color:#323232;"> <option value="4">4</option>
</span><span style="color:#323232;"> <option value="5">5</option>
</span><span style="color:#323232;"> <option value="6">6</option>
</span><span style="color:#323232;"> <option value="7">7</option>
</span><span style="color:#323232;"></select>
</span><span style="color:#323232;"><button onclick="rollDice()">Roll</button>
</span><span style="color:#323232;"><div id="result-frame"></div>
</span><span style="color:#323232;">
</span><span style="color:#323232;"><script>
</span><span style="color:#323232;">function rollDice() {
</span><span style="color:#323232;"> var numDice = parseInt(document.getElementById('num-dice').value);
</span><span style="color:#323232;"> var resultFrame = document.getElementById('result-frame');
</span><span style="color:#323232;"> resultFrame.innerHTML = ''; // Clear previous results
</span><span style="color:#323232;">
</span><span style="color:#323232;"> var diceImages = [];
</span><span style="color:#323232;"> for (var i = 1; i <= 6; i++) {
</span><span style="color:#323232;"> var img = document.createElement('img');
</span><span style="color:#323232;"> img.src = 'https://www.slyautomation.com/wp-content/uploads/2024/03/' + 'dice' + i + '.png'; // Change the path to match your uploaded images
</span><span style="color:#323232;"> diceImages.push(img);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">
</span><span style="color:#323232;"> for (var j = 0; j < numDice; j++) {
</span><span style="color:#323232;"> var result = Math.floor(Math.random() * 6); // Random result from 0 to 5
</span><span style="color:#323232;"> var diceImage = diceImages[result].cloneNode();
</span><span style="color:#323232;"> resultFrame.appendChild(diceImage);
</span><span style="color:#323232;"> }
</span><span style="color:#323232;">}
</span><span style="color:#323232;"></script>
</span><span style="color:#323232;"></body>
</span><span style="color:#323232;"></html>
</span>
Add comment