// Create UI container
const box = document.createElement("div");
box.style.position = "fixed";
box.style.bottom = "20px";
box.style.right = "20px";
box.style.padding = "20px";
box.style.background = "#fff";
box.style.border = "2px solid #333";
box.style.borderRadius = "12px";
box.style.fontFamily = "Arial";
box.style.textAlign = "center";
box.style.boxShadow = "0 8px 20px rgba(0,0,0,0.25)";
box.innerHTML = `
Animated Dice 🎲
🎲
Result: -
`; document.body.appendChild(box); // Dice faces const diceFaces = ["⚀","⚁","⚂","⚃","⚄","⚅"]; document.getElementById("rollBtn").onclick = () => { const dice = document.getElementById("dice"); const resultText = document.getElementById("result"); let rolls = 10; // animation frames let count = 0; const interval = setInterval(() => { const randomFace = diceFaces[Math.floor(Math.random() * 6)]; dice.textContent = randomFace; count++; if (count >= rolls) { clearInterval(interval); const finalRoll = Math.floor(Math.random() * 6); dice.textContent = diceFaces[finalRoll]; resultText.textContent = "Result: " + (finalRoll + 1); } }, 100); };