JSFiddle - React, Tailwind, and code Playground

by Alisson Alvarenga

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button type="button" class="btn btn-default" id="generate-btn">Genarate Random Colors</button>
<br/><br/>
<table class="table">
  <thead>
   <tr>
     <th>RGB Values</th>
     <th>RGH Hexadecimal Values</th>
     <th>Display</th>
   </tr>
  </thead>
  <tbody id="tbody">
    
  </tbody>
</table>

JavaScript

document.getElementById('generate-btn').addEventListener("click", generateRandom);
var tbody = document.getElementById('tbody');

function generateRandom() {
		
    tbody.innerHTML = '';
    
    for (var i = 0; i < 11; ++i) {
        var randR = (Math.random().toFixed(3) * 1000) % 256;
        var randG = (Math.random().toFixed(3) * 1000) % 256;
        var randB = (Math.random().toFixed(3) * 1000) % 256;       
        
        var rgbValue = '(' + randR + ', ' + randG + ', ' + randB + ')';
        var tdF = '<td>' + rgbValue + '</td>';
        
        var hexValue = '#' + randR.toString(16) + randG.toString(16) + randB.toString(16);
        var tdH = '<td>' + hexValue + '</td>';
        
        var display = '';
        var tdD = '<td style="background-color:' + hexValue + '"></td>';
        
        var tr = '<tr>' + tdF + tdH + tdD + '</tr>'        
        
        tbody.innerHTML = tbody.innerHTML + tr;

    }
}