JSFiddle - React, Tailwind, and code Playground

by Dan Shahin

HTML

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
<h1>dice</h1>
#<input id="dice" type="number"/>
D<input id="sides" type="number"/>
<button id="roll">roll</button>
<div id="out"/>

CSS

h1 {color:gray;font-size:36px;font-family:Arial;}
input {width:50px;}

JavaScript

$('#roll').button().on('click', function() {
    var dice = $('#dice').val(),
        sides = $('#sides').val(),
        roll = 0;
    for (var i = 0; i < dice; i++) {
        roll += Math.floor(Math.random() * sides) + 1;
    }
    $('#out').prepend(dice + 'D' + sides + ' :' + roll + '<br>');
    //alert('rolled: ' + roll);
});