JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<div id="js-religion-scatterplot"></div>

JavaScript

jQuery(document).ready(function(){



  // only using this if we need a mobile class for detection....not necessary atm
  enquire.register('screen and (max-width : 500px)', [
    { match : function() { jQuery('#js-religion-scatterplot').addClass('mobile-religion-scatterplot'); } },
    { unmatch : function() { jQuery('#js-religion-scatterplot').removeClass('mobile-religion-scatterplot'); } }
  ]);
  // append interactive in appropriate div
  jQuery('#js-religion-scatterplot').append(jQuery(pageMarkup));
  //jQuery('#amtslider + div').addClass('ui-state-default-first');



    var amts = [2007,2008,2009,2010,2011,2012,2013,2014,2015];
    var value = jQuery('#output-year').val();
        //console.log("WHAT");

        jQuery( "#amtslider" ).slider({
          range: "min",
          min: 0,
          max:amts.length-1,
            step:1,
            value: value,
            ticks: true,
            change:function(event, ui){
              jQuery('#output-year').val(amts[jQuery(this).slider("value")]);
              sliderYear = jQuery('#output-year').val();
              //jQuery('#amtslider span').removeClass('ui-state-default-first');
              //console.log("SLIDER YEAR FREAKING WORK: " + sliderYear);
              dataURL = jsonURLBase + sliderYear + jsonURLEnd;
              //console.log(dataURL);
              jQuery.getJSON(dataURL, function(data) {
                chart.series[0].setData(data);
              })

            //var value = jQuery( "#amtslider" ).slider( "values", 0 );
            console.log('change event 1 fired!');
            jQuery('#amtslider :first').addClass('ui-state-default-first');
            //console.log('Value: ' + value);
          },
            slide:function(event, ui){
              jQuery('#output-year').val(amts[jQuery(this).slider("value")]);
              //var value = jQuery( "#amtslider" ).slider( "values", 0 );
              console.log('slide event 2 fired!');
              //console.log('Value: ' +...