Untitled
1 year ago in Plain Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dice Roller Widget</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#dice {
font-size: 24px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Dice Roller Widget</h1>
<p>Click the button below to roll the dice:</p>
<button id="dice">Roll Dice</button>
<p id="result"></p>
<script>
document.getElementById('dice').addEventListener('click', function() {
const resultElement = document.getElementById('result');
const rollResult = Math.floor(Math.random() * 6) + 1; // Generate a random number between 1 and 6
resultElement.textContent = `You rolled a ${rollResult}!`;
});
</script>
</body>
</html>