JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<html lang="en">
<body>
<head>
 
</head>
<div class="container">
  <div class="row">
    <div class="col-sm-3" onclick="rollDice(0,8,0,0,0,0);">
      <h3>Fireball</h3>
    </div>
    <div class="col-sm-3">
      <h3>Cloudkill</h3>
    </div>
    <div class="col-sm-3">
      <h3>Cure Wounds</h3>
    </div>
    <div class="col-sm-3">
      <h3>Witchbolt</h3>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <h3>Meteor Swarm</h3>
    </div>
    <div class="col-sm-3">
      <h3>Healing Word</h3>
    </div>
    <div class="col-sm-3">
      <h3>Chain Lightning</h3>
    </div>
    <div class="col-sm-3">
      <h3>Sleep</h3>
    </div>
  </div>
</div>

</body>
</html>

JavaScript

function rollDice(d4,d6,d8,d10,d12,d20) {
	var dice = {d4,d6,d8,d10,d12,d20};
  var diceInt = [4,6,8,10,12,20];
  var results = {};
  var sum = {};
	for (var die = 0; die < dice.length();) {
  	for (int roll = 0; roll < dice[die]; roll++) {
    	var temp = Math.floor(Math.random()*diceInt + 1);
    	results[die][roll]+= temp;
      sum[die]+=temp;
    }
  }
  for (var die = 0; die < dice.length();) {
  	console.log("Rolling d" + dice[die]);
    var output = "";
  	for (int roll = 0; roll < dice[die]; roll++) {
    	output+=results[die][roll];
      if (roll+1 < dice[die]) output+= " + ";
      else output+=" = " + sum[die];
    }
    console.log(output);
  }
  
}