pokeImages3download

by yairamon

HTML

<h3>Catalog
</h3>


<div id="graphs" class="grid">

</div> 

<canvas height=50 width = 30>

</canvas>

CSS

<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
		border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
    
    .grid {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(auto-fill, 27px);
}

a {
    background: green;
    color: #eee;
    padding: 5px 10px;
}


</style>

JavaScript

var id = "1xCqAxBKNXHuATDgMmnstus8bOfdW_aUeHT4BJ-DuD-M";
//var id = "1hbHqrnYa4oMUquZcq8WkTJk0kI0t9scGBwro-EH-ALA";

var url = 'https://spreadsheets.google.com/feeds/cells/' + id + '/1/public/values?alt=json-in-script&callback=?';



$.getJSON(url, cellEntries);

var rowData = [];

function cellEntries(json) {

    var data = json.feed.entry;

    var allData = [];
    var rowData = [];
    var row = 0;

    for (var i = 0; i < data.length; i++) {
        var cell = data[i]["gs$cell"];

        if (cell.col == 1) {
            if (++row > 1) {
                allData.push(rowData);
                rowData = [];
            }
        }

        var val = cell["$t"];
        rowData.push(val);

    }

    allData.push(rowData);

    show(allData);
}




function show(allData) {

    for (i = 1; i < allData.length; i++) {
    
    		var pokeName = allData[i][1];
        var pokeAvailability = allData[i][8];
        var pokeStatus = allData[i][9];
        


        $('#graphs').append(
            "<div><img id='img" + i + "' src='https://pkmref.com/images/set_1/" + i + ".png' " +

            "style='width:25px;height:25px;' title='foo\n" + i + " " + pokeName + " status " + pokeStatus + "'>");

	
        if (pokeStatus === "n/a") $("#img" + i).css({
            opacity: 0.1 ,
             "background-color": "#111111"
        });
        else if (pokeStatus === "Y") $("#img" + i).css({
            "background-color": "#CCFFCC"
        });
        else if (pokeStatus === "Soonish") $("#img" + i).css({
            "background-color": "orange"
        });        
        else if (pokeStatus === "N") $("#img" + i).css({
            "background-color": "#FFCCCC"
        });
        else
        	$("#img" + i).css({
            "background-color": "red"
        });
        
        
    }
}

var canvas = document.querySelector( 'canvas' );

var link = document.createElement('a');
    link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
   ...