JSFiddle - React, Tailwind, and code Playground

by chris5marsh

HTML

<link rel="stylesheet" href="http://www-users.york.ac.uk/~cm1438/design-patterns/css/styles.min.css">
<div id="result"></div>

CSS

body {
    padding:0 20px;
}

JavaScript

var data = [];
var currentSubject = false;

var makeCells = function(headers, data, type) {
    for (var i = 0; i < data.length; i++) {
        console.log(data[i]);
        if (data[i][type] === 'No') continue;
        var output = '';
        if (data[i]['Subject'] !== currentSubject) {
            output+= '<h3>'+data[i]['Subject']+'</h3>\n';
            currentSubject = data[i]['Subject'];
        }
        output+= '<div>\n';
        output+= '  <h4>'+data[i]['Title of course']+'</h4>\n';
        output+= '  <p>Grade required: '+data[i]['Grade required']+'</p>\n';
        output+= '  <p>UCAS code: '+data[i]['UCAS code']+'</p>\n';
        output+= '  <p>Phone number(s): '+data[i]['Phone number(s)']+'</p>\n';
        output+= '  <p>Qualification earned: '+data[i]['Qualification earned']+'</p>\n';
        output+= '  <p>Course length: '+data[i]['Course length']+'</p>\n';
        output+= '  <p>Type of course: '+data[i]['Type of course']+'</p>\n';
        if (data[i]['Bullet 1'] || data[i]['Bullet 2'] || data[i]['Bullet 3']) output+= '  <ul>';
        if (data[i]['Bullet 1']) output+= '  <li>'+data[i]['Bullet 1']+'</li>\n';
        if (data[i]['Bullet 2']) output+= '  <li>'+data[i]['Bullet 2']+'</li>\n';
        if (data[i]['Bullet 3']) output+= '  <li>'+data[i]['Bullet 3']+'</li>\n';
        if (data[i]['Bullet 1'] || data[i]['Bullet 2'] || data[i]['Bullet 3']) output+= '  </ul>';
        output+= '</div>\n';
        $('#result').append(output);
    }
}

$.getJSON('https://spreadsheets.google.com/feeds/cells/1wbTOk0YHux4LxJZxOlE_nhmGBdi7mT9NL-WCwB7-gT8/od6/public/full?alt=json', function(r) {
    // console.log(r.feed.entry);
    for (var i = 0; i < r.feed.entry.length; i++) {
        var cell = r.feed.entry[i].gs$cell;
        var row = parseInt(cell.row) - 1;
        var col = parseInt(cell.col) - 1;
        // Get column name from first results of feed
        var colName = r.feed.entry[col].gs$cell.inputValue;
        // console.log(row, col, colName);
    ...