JSFiddle - React, Tailwind, and code Playground

by quangcanh2975

JavaScript

const RED = 'red',
  BLUE = 'blue',
  GREEN = 'green',
  YELLOW = 'yellow';
var x = [RED, RED, BLUE, BLUE, BLUE, GREEN, YELLOW, RED, RED, GREEN, YELLOW];

function createTable() {
  var prev = '';
  var next = '';
  var btn;

  var output = '<table style="margin-top: -230px;" id="display"><tr>';
  for (var color of x) {
    switch (x) {
      case RED:
        btn = "bg-danger";
        break;
      case BLUE:
        btn = "bg-primary";
        break;
      case GREEN:
        btn = "bg-success";
        break;
      case YELLOW:
        btn = "bg-warning";
        break;
      default:
        btn = "bg-primary";

        break;
    }
    if (prev === next || prev === '' || next === "yellow" || next === 'green') {
      output += '<td v-align="top"><span data-toggle="tooltip" class="badge ' + btn +
        '" style="font-size: 1.6em; margin: .05em; border-radius: 30px;">&#664;</span></td>';

    } else {
      output += '</tr><tr><td v-align="top"><span data-toggle="tooltip" class="badge ' + btn +
        '" style="font-size: 1.6em; margin: .05em; border-radius: 30px;">&#664;</span></td>';
    }

    prev = next;
    output += '<td v-align="top"><span data-toggle="tooltip" class="badge ' + btn +
      '" style="font-size: 1.6em; margin: .05em; border-radius: 30px;">&#664;</span></td>';
  }
	output += '</tr></table>';
	return output;
}

var result = createTable();
console.log(result)
alert(result);