JSFiddle - React, Tailwind, and code Playground

by Chris Hughes

HTML

<html>

  <head>

    <!-- Linking Scripts and Files -->

    <!--jQuery-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <!-- Add fancyBox -->
    <link rel="stylesheet" href="resource/FancyBox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="resource/FancyBox/source/jquery.fancybox.pack.js?v=2.1.5"></script>

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="resource/FancyBox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
    <script type="text/javascript" src="resource/FancyBox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
    <script type="text/javascript" src="resource/FancyBox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

    <!--Stylesheet-->
    <link rel="stylesheet" type="text/css" href="style3.css" />

    <!--JavaScript Files-->
    <script src="script/sorttable.js"></script>
    <script src="http://listjs.com/no-cdn/list.js"></script>
    <script src="qc_page.js"></script>

    <meta charset="utf-8">

  </head>

  <body>

    <h1> DEOS Quality Control Website </h1>

    <!--Displaying the Calendar-->
    <div id="calendar">
      Date:
      <input type="text" id="datepicker">
    </div>

    <!--External Links-->
    <div id="External_Links">
      External Links: &nbsp
      <a href='NetworkSummary.php'>Daily Network Summary</a> &nbsp
      <a href='StationSummary.php'>Station Summary</a>
      <br/>
    </div>

    <div id="image_div" onclick="changeImage()">
      <!--QA/QC Maps-->

      <?php
//Get current date and edit file name
$date_Selection = $_GET['date_Selection'];
$date_Selection = date("Ymd",strtotime($date_Selection));
$month_Selection = ...

JavaScript

var options = {
  valueNames: ['station_ID', 'data_type_NAME', 'timestamp', 'value', 'flag', 'qc_result']

};
var userList = new List('qc_items', options);

// Selecting a date from the Calendar
var $datepicker = $("#datepicker").datepicker({
  dateFormat: 'dd-M-yy'
});
$datepicker.datepicker();
var date_Selection = $datepicker[0].value;
document.getElementById("datepicker").onchange = function() {
  var date_Selection = $datepicker[0].value;
  window.location.href = "index_test6.php?date_Selection=" + date_Selection;
};



function displayMaps(map_variable) {

  //Need to associate with proper date when daily images are being generated
  var date_Selection = "<?php echo $date_Selection; ?>";

  if (map_variable == "the_t_td_min") {
    document.getElementById("map1").src = "qaqc_maps/min_tempF_" + date_Selection + ".png";
    document.getElementById("map2").src = "qaqc_maps/min_dptF_" + date_Selection + ".png";
  }

  if (map_variable == "the_t_td_avg") {
    document.getElementById("map1").src = "qaqc_maps/avg_tempF_" + date_Selection + ".png";
    document.getElementById("map2").src = "qaqc_maps/avg_dptF_" + date_Selection + ".png";
  }

  if (map_variable == "the_t_td_max") {
    document.getElementById("map1").src = "qaqc_maps/max_tempF_" + date_Selection + ".png";
    document.getElementById("map2").src = "qaqc_maps/max_dptF_" + date_Selection + ".png";
  }

  if (map_variable == "the_pressure") {
    document.getElementById("map1").src = "qaqc_maps/avg_press_" + date_Selection + ".png";
    document.getElementById("map2").src = "qaqc_maps/avg_press_" + date_Selection + ".png";
  }

  if (map_variable == "the_solar_par") {
    document.getElementById("map1").src = "qaqc_maps/max_solar_" + date_Selection + ".png";
    document.getElementById("map2").src = "qaqc_maps/max_par_" + date_Selection + ".png";
  }
  if (map_variable == "the_ws_wg") {
    document.getElementById("map1").src = "qaqc_maps/avg_wspdMPH_" + date_Selection + ".png";
   ...