Simple jQuery dice roller

Developer
Size
2,187 Kb
Views
149,776

How do I make an simple jquery dice roller?

This is a simple jQuery dice roller that can roll any dice from D&D.. What is a simple jquery dice roller? How do you make a simple jquery dice roller? This script and codes were developed by Billy Brown on 30 September 2022, Friday.

Simple jQuery dice roller Previews

Simple jQuery dice roller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple jQuery dice roller</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html { text-align: center;
}
.roll { padding: 1em;
}
.die { height: 100px; width: 100px; margin: 10px auto; background: white; border: 2px solid black; border-radius: 10px; font-family: Menlo, monospace; font-size: 4em; line-height: 100px; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <button class="roll">D4</button>
<button class="roll">D6</button>
<button class="roll">D8</button>
<button class="roll">D10</button>
<button class="roll">D12</button>
<button class="roll">D20</button>
<button class="roll">D30</button>
<button class="roll">D100</button>
<div class="die">0</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple jQuery dice roller - Script Codes CSS Codes

html { text-align: center;
}
.roll { padding: 1em;
}
.die { height: 100px; width: 100px; margin: 10px auto; background: white; border: 2px solid black; border-radius: 10px; font-family: Menlo, monospace; font-size: 4em; line-height: 100px; text-align: center;
}

Simple jQuery dice roller - Script Codes JS Codes

var dieNum;
function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1) + min);
}
function rollDie(num) { num = num.substring(1, num.length); $(".die").html(getRandomInt(1, num));
}
$(".roll").on("click", function() { dieNum = $(this).html(); rollDie(dieNum);
});
Simple jQuery dice roller - Script Codes
Simple jQuery dice roller - Script Codes
Home Page Home
Developer Billy Brown
Username _Billy_Brown
Uploaded September 30, 2022
Rating 3
Size 2,187 Kb
Views 149,776
Do you need developer help for Simple jQuery dice roller?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Billy Brown (_Billy_Brown) Script Codes
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!