JSFiddle - React, Tailwind, and code Playground

by BaronGrivet

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<div id="recommendation">
Recommendation
</div>

JavaScript

google.load('visualization', '1', {packages: ['table']});

$(document).ready(function() {

    $('form').change(function() {
        var data = {};
        $('form').serializeArray().map(function(x) {
            data[x.name] = x.value;
        });
        console.log(data);
        Cookies.set('deviceCheckUp', data, {
            expires: 30,
            path: ''
        });
    });

    if ($('#recommendation').length) {

        timeResponse = Date.now();

        var deviceCheckUp = Cookies.get('deviceCheckUp');
        console.log(deviceCheckUp);

        var answers = JSON.parse(deviceCheckUp);
        var answerString = '';

        for (var answer in answers) {
            if (answerString) {
                answerString += ','
            }
            answerString += answers[answer];
        }
        
        var answerString = 'Meter and Injections';

        console.log(answerString);

        var queryString = 'SELECT A,B,C,D,E,F,G';
        queryString += ' WHERE ("' + answerString + '" CONTAINS H AND I IS NULL AND J IS NULL)';
        queryString += ' OR ("' + answerString + '" CONTAINS H AND "' + answerString + '" CONTAINS I AND J IS NULL)';
        queryString += ' OR ("' + answerString + '" CONTAINS H AND "' + answerString + '" CONTAINS I AND "' + answerString + '" CONTAINS J)';
        queryString += ' LABEL A "Block Position", B "Block Type", C "Block Title", D "Block Subtitle", E "Block Text", F "Block Image", G "Block Link"';
        console.log(queryString);

        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1z260pVM51nlm_Aw8hU69vrclLJ6uxsWRNrwpUUdV1LA/edit#gid=0');
        query.setQuery(queryString);
        var contentBlocks = query.send(handleQueryResponse);
        console.log(responseData);

    }
});

function handleQueryResponse(response) {
    console.log('handleQueryResponse');
    console.log(Date.now() - timeResponse);

    if (response.isError()) {
        alert('error in query: ' +...