JSFiddle - React, Tailwind, and code Playground

by boneskull

HTML

<body bgcolor="#ffffff" ng-app>
    <form name="cForm" ng-controller="year2007_08">
        <br>
         <h2>Commit Data Report Builder</h2> 
        <table class="dataLevel">
            <tr>
                <td>
                    <center><b>District Level</b>
                    </center>
                </td>
                <td>
                    <center><b>Campus Level</b>
                    </center>
                </td>
                <td>
                    <center><b>Student Level</b>
                    </center>
                </td>
            </tr>
        </table>
        <table id="districtsT1" class="districtRow">
            <thead>
                <tr>
                    <th colspan="100%" style="padding: 4px 4px 4px 4px;"><b style="padding: 4px 4px 4px 4px; font-size: 80%;"><span class="span1">Step 1:</span> Choose a district. Two compare districts, select two.</b>
                    </th>
                </tr>
            </thead>
            <tr>
                <td class="td1" colspan="2" onclick="makeSelection(this)" id="d_all" value="All">
                    <center>All Dallas County Districts</center>
                </td>
                <td class="td1" onclick="makeSelection(this)" id="d_carrollton_fb" value="Carrollton-FB">
                    <center>Carrollton-FB</center>
                </td>
                <td class="td1" onclick="makeSelection(this)" id="d_cedar_hill" value="Cedar Hill">
                    <center>Cedar Hill</center>
                </td>
                <td class="td1" onclick="makeSelection(this)" id="d_coppell" value="Coppell">
                    <center>Coppell</center>
                </td>
                <td class="td1" onclick="makeSelection(this)" id="d_dallas" value="Dallas">
                    <center>Dallas</center>
                </td>
                <td class="td1" onclick="makeSelection(this)" id="d_desoto" value="DeSoto">
                    <center>DeSoto</center>
              ...

CSS

body {
    background: #0088A3;
    height: 1200px;
    width: 930px;
    /* to centre page on screen*/
    margin-left: auto;
    margin-right: auto;
}
h2 {
    font-family: Gotham;
    color: #f7b700;
}
b {
    color: #003663;
}
.td1 {
    height: 30px;
}
.span1 {
    font-weight: bold;
    color: #f15827;
    font-size: 18;
}
.dataLevel {
    background: #dedede;
    font-family: gotham;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: 90%;
    height: 60px;
    border-radius: 1px;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
}
.timeframe {
    background: #dedede;
    font-family: gotham;
    margin-top: 30px;
    font-size: 90%;
    height: 60px;
    border-radius: 1px;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
}
.districtRow {
    background: #dedede;
    font-family: gotham;
    font-size: 100%;
    height: 85px;
    border-radius: 1px;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
}
th {
    text-align: left;
}
.outerTable {
    margin-top: 30px;
}
.outerTable_td {
    width: 33%;
    padding: 15px;
}
.t3 {
    background: #dedede;
    display: inline-block;
    vertical-align: top;
    border: 0px solid;
    width: 100%;
    height: 100%;
    height: 366px;
    float: left;
    font-size: 80%;
    padding: 4px 4px 4px 4px;
    border-radius: 1px;
    font-family: gotham;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.t1 {
    background: #dedede;
    display: inline-block;
    vertical-align: top;
    border: 0px solid;
    width: 100%;
    height: 100%;
    font-size: 80%;
    padding: 4px 4px 4px 4px;
    border-radius: 1px;
    font-family: gotham;
    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.3);
}
.taks {
    background: #dedede;
    display: inline-block;
    vertical-align: top;
    border: 0px solid;
    width: 100%;
    height: 100%;
    font-size: 80%;
    padding: 4px 4px 4px 4px;
    border-radius: 1px;
    font-family: gotham;
    box-shadow: 0px 0px 0px 8px...

JavaScript

var count = 0;

function makeSelection(element) {
    if (count <= 2) {
        if (element.style.background == 'black') {
            element.style.color = "black";
            element.style.background = '#DEDEDE';
            count--;
        } else {
            if (count < 2) {
                element.style.color = '#D0D0D0';
                element.style.background = "black";
                count++;
            }
        }
    }
}

function runReport() {
    alert("Submission Successful !!");
}



function year2007_08($scope)
{
$scope.$watch('checked07 || checked08 || checked09 || checked10', function(newval) {
  $scope.check = !!newval;
});    
}