JSFiddle - React, Tailwind, and code Playground

HTML

<input id="year" type="text" /><a href="#" id="getval">get</a><br />
<img id="hi" src="http://www.placekitten.com/100/100" />

JavaScript

$('#getval').click(function(){
    yr = $('#year').val();
    imsrc = makeIcon(yr);
    $('#hi').attr('src', imsrc);
    
});

function makeIcon(year) {
    if(year){
        var century = year.slice(0,2);
        var decade = year.slice(2,4);

        dif = Math.round((1-((100 - decade)/100))*255);
        if (century == 18) {
            rgb = 'rgb(0,' + dif + ',255)';
        }
        else if (century == 19) {
            rgb = 'rgb(255,' + dif + ',0)';
        }
        //rgb = 'rgb(255,' + dif + ',0)';
        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
        function hex(x) {
            return ("0" + parseInt(x).toString(16)).slice(-2);
        }
        
        var color = hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
        
    } else {
        var color = 'FF0000';
        var decade = '';
    }
    var imagetoreturn = 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld='+decade+'|'+color+'|000000';
    
    return imagetoreturn;
}