Random Dice
How do I make an random dice?
Random dice roller. What is a random dice? How do you make a random dice? This script and codes were developed by Joshua Michael Waggoner on 11 October 2022, Tuesday.
Random Dice - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random Dice</title> <link href='https://fonts.googleapis.com/css?family=IM+Fell+English|Crimson+Text|Lato' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Random Dice Roller</h1>
<h2>Select Dice</h2>
<select class="nDice"> <option val="1">1 Die</option> <option val="2" selected="true"> 2 Dice</option> <option val="3">3 Dice</option> <option val="4">4 Dice</option> <option val="5">5 Dice</option> <option val="7">7 Dice</option> <option val="8">8 Dice</option> <option val="9">9 Dice</option> <option val="10">10 Dice</option> <option val="11">11 Dice</option> <option val="12">12 Dice</option> <option val="13">13 Dice</option> <option val="14">14 Dice</option> <option val="15">15 Dice</option> <option val="17">17 Dice</option> <option val="18">18 Dice</option> <option val="19">19 Dice</option> <option val="20">20 Dice</option>
</select>
<select class="nSides"> <option val="4">4-sided</option> <option val="6" selected="true"> 6-sided</option> <option val="8">8-sided</option> <option val="10">10-sided</option> <option val="12">12-sided</option> <option val="16">16-sided</option> <option val="18">18-sided</option> <option val="20">20-sided</option> <option val="50">50-sided</option> <option val="100">100-sided</option>
</select>
<button class="btn-roll">Roll</button> <table class='table_dice' id="table_dice"> </table> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Random Dice - Script Codes CSS Codes
body { background-color: #262626; text-align:center; padding:0; height:100%; margin-left:25%; margin-right: 25%;
}
h1 { color:#E60000; font-family:'IM Fell English', serif; text-align: center; border-color: red;
}
h2 { margin-top:-15px; color:#CCFFCC; font-family: 'IM Fell English', serif;
}
.dice{ float:left; display: center; width:32px; height:32px; background-color: brown; border: 3px solid #311000; padding:10px; font-size:25px; text-align:center; margin: 10px; margin-top:20px; border-radius: 10px; color:#EEEEEE; font-family: 'IM Fell English', serif;
}
.btn-roll, .nSides, .nDice { font-size: 20px; margin-top: 0px; min-height: 40px; /*IE compatible*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-style: groove; border-color: black; padding: 5px; padding-right: 8px; padding-left: 8px; font-family: 'Lato', serif;
}
.btn-roll { color: #E60000; min-width: 4.0em; width:70px;
}
.table_dice { margin-left: 20%; margin-right: 20%; display: table; margin: 10px auto; width:0%;
}
Random Dice - Script Codes JS Codes
/* Initial variables */
(function() { var avg, dups, getRandomInt, nDice, nSides, rollDice, rollSeq, rolls, seq, total; total = 0; seq = 0; nDice = 0; nSides = 0; avg = 0; rolls = []; rollSeq = []; dups = []; $(document).on('click', '.btn-roll', function() { nDice = $('.nDice option:selected').attr('val'); nSides = $('.nSides option:selected').attr('val'); log("I\'m rolling!!!"); rollDice(nDice, nSides); }); rollDice = function(numDice, numSides) { var html, i, table_dice; table_dice = document.getElementById('table_dice'); $(table_dice).html(''); i = 0; rolls = []; while (i < numDice) { rolls.push(Number(getRandomInt(1, numSides))); i++; } i = 0; html = ''; while (i < rolls.length) { html += '<div class="dice">' + rolls[i] + '</div>'; i++; } table_dice.insertAdjacentHTML('beforeend', html); }; getRandomInt = function(min, max) { return Math.floor(Math.random() * (max - min)) + min; };
}).call(this);
Developer | Joshua Michael Waggoner |
Username | rabbitfighter81 |
Uploaded | October 11, 2022 |
Rating | 3 |
Size | 3,422 Kb |
Views | 18,216 |
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!
Name | Size |
Retro CoffeeScript Timer | 3,225 Kb |
FE ReactJS F.A.Q. Menu System | 5,920 Kb |
Running Man Sprite Demo | 4,003 Kb |
JSX 2 JavaScript Live Compiler | 4,089 Kb |
React SearchBox | 4,521 Kb |
Denver Broncos Arrests Since January 1, 2000 | 11,439 Kb |
Modern Dark Theme CoffeeScript Timer | 3,257 Kb |
A Pen by Joshua Michael Waggoner | 4,218 Kb |
React.js Search Box | 5,909 Kb |
Random Password Generator | 4,286 Kb |
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!
Name | Username | Size |
Side Sliding Menu CSS | EduardL | 4,388 Kb |
Border image | JohnRiordan | 2,120 Kb |
Slider css only | Armandobau | 2,161 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 Kb |
Loading Bar | Jaradlight | 2,333 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!