// ID of your Google Spreadsheet
const spreadsheetID = "YOURID";

const url = "https://spreadsheets.google.com/feeds/cells/" + spreadsheetID + "/1/public/values?alt=json";

const content = {
    html: function() {

        //fetches data from your spreadsheet url
        return $.getJSON(url).then(function(data) { 

            //create and array to hold lists for each row/item
            const items = [];            

            //spread info (used for loops), amount of:
            const rows = JSON.parse(data.feed.gs$rowCount.$t);
            const columns = JSON.parse(data.feed.gs$colCount.$t);
            const cells = rows * columns;
            const entry = data.feed.entry;            

            //sort into array 1 for each row/item
            let l = columns;
            let end = columns * 2; //current row end            
            
            //for every row k
            for (let k = 0; k < rows; k++) {

                //create an array
                items[k] = [];  
              
                //for every column in row k write content of current column; 
                //end = amount of columns
                for (let j = l; j < end; j++) {
                    if (entry[j] === undefined) {
                        items[k].push('entry[j].content.$t');                        l = j; //set current cell number for next loop
                    } else {
                        items[k].push(entry[j].content.$t);                        l = j; //set current cell number for next loop
                    }
                }                //if end of row k
                if (end === cells) {
                    break;
                }                
                //else, increment to end & beginning of new row
                else {
                    end += columns;
                    l += 1;
                }
            }            
            
            //write data for every row - 1 (title row)
            const content = [];
            for (let m = 0; m < rows - 1; m++) {
                content.push('<div class="card ' + items[m][5] + '"><a href="' + items[m][4] + '"><div class="overlay"></div><img src="' + items[m][3] + '"><div class="overlay-text"><i class="fas fa-hashtag"></i></div></a><div class="box"><h2>' + items[m][0] + '</h2><i>' + items[m][1] + '</i><div class="sep"></div><div class="desc">' + items[m][2] + '</div></div></div>')
            }            

            return content;

        });
    }
};

content.html().done(function(html) {
    buildLayout(html);
});

function buildLayout(content, grid) {    $('#grid').hide();
    $('#grid').append(content);    $('#grid').fadeIn();    //resizeGrid on load
    resizeGrid();    //initialise isotope
    const $grid = $('#grid').isotope({
        itemSelector: '.card',
    });    $('nav a').on('click', function() {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({
            filter: filterValue
        });
        e.preventDefault();
    });
}