Skip Navigation
Python @programming.dev
slyuser @lemmy.ml

Dice Roller with Python using either tkinter or streamlit

www.slyautomation.com

Dice Roller with Python

In this tutorial, we’ll walk through the process of creating a simple dice roller application using Python’s Tkinter library. Tkinter is a popular GUI (Graphical User Interface) toolkit for Python tha...

the code on the website is javascript here it is, make sure to create dice images for it to work (e.g dice1.png): 

 
    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice Roller</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    #result-frame {
        margin-top: 20px;
    }
</style>
</head>
<body>
<h2>Dice Roller</h2>
<label for="num-dice">Choose Number of Dice:</label><br><br>
<select id="num-dice">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
</select>
<button onclick="rollDice()">Roll</button>
<div id="result-frame"></div>

<script>
function rollDice() {
    var numDice = parseInt(document.getElementById('num-dice').value);
    var resultFrame = document.getElementById('result-frame');
    resultFrame.innerHTML = ''; // Clear previous results

    var diceImages = [];
    for (var i = 1; i <= 6; i++) {
        var img = document.createElement('img');
        img.src = 'https://www.slyautomation.com/wp-content/uploads/2024/03/' + 'dice' + i + '.png'; // Change the path to match your uploaded images
        diceImages.push(img);
    }

    for (var j = 0; j < numDice; j++) {
        var result = Math.floor(Math.random() * 6); // Random result from 0 to 5
        var diceImage = diceImages[result].cloneNode();
        resultFrame.appendChild(diceImage);
    }
}
</script>
</body>
</html>

Comments

1