Weather Thermometer - jQuery

Solomon Chijioke - Javascript

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.18/jquery-ui.js"></script>
<!-- 
@Author:  Solomon Chijioke Jeffrey(Software Engineer)
@Use:     HTML5 for the Thermometer
@Date:    Copyright (Last Updated 2015)
@Design:  Style
-->
<!--STARTS THE SECTION-->
<div id="section">
   <div class="slider-container">
      <h1 class="device-caption">Weather Thermometer</h1>
      <h6 class="below-caption">Select your Temperature</h6>
      <form action="#">
         <fieldset class="meter">
            <div class="thermometer heat3">
               <div class="slider" id="temperature" data-begin="0" data-end="4"></div>

               <div class="mercury_0">
                  <label for="setTo[0]" class="checked_0"><span>0<sup>o</sup></span></label>
                  <br />
                  <input type="radio" name="[temperature]" value="0" id="setTo[0]" />
                  <br/>
               </div>

               <div class="mercury_1">
                  <label for="setTo[1]" class="checked_1"><span>30<sup>o</sup></span></label>
                  <br/>
                  <input type="radio" name="[temperature]" value="30" id="setTo[1]" />
                  <br/>
               </div>

               <div class="mercury_2">
                  <label for="setTo[2]" class="checked_2"><span>60<sup>o</sup></span></label>
                  <br />
                  <input type="radio" name="[temperature]" value="60" id="setTo[2]" />
                  <br />
               </div>

               <div class="mercury_3">
                  <label for="setTo[3]" class="checked_3"><span>90<sup>o</sup></span></label>
                  <br/>
                  <input type="radio" name="[temperature]" value="90" id="setTo[3]" />
               </div>

               <div class="mercury_4">
                  <label...

CSS

/* 
@Author:  Solomon Chijioke Jeffrey(Software Engineer)
@Use:     Device Design CSS
@Date:    Copyright (Last Updated 2015)
@Design:  Style
*/

body {
   font: normal 16px/20px "Helvetica Neue", Helvetica, sans-serif;
   margin: 0;
   margin-top: 40px;
   padding: 0;
}

h1 {
   padding-top: 10px;
}

.checked_green {
   color: green;
   font-weight: bold;
}

.mercury_0 {
   margin-left: 12px;
}

.mercury_1 {
   margin-left: 167px;
   margin-top: -45px;
}

.mercury_2 {
   margin-left: 325px;
   margin-top: -45px;
}

.mercury_3 {
   margin-left: 483px;
   margin-top: -45px;
}

.mercury_4 {
   margin-left: 640px;
   margin-top: -45px;
}

.meter {
   width: 670px;
   background-color: #000000;
   color: #585858;
   padding: 2px;
   height: 110px;
   border-style: solid;
   border-width: 2px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
}

.device-caption {
   color: #666;
   text-shadow: 0px -1px 0px rgba(0, 0, 0, .5);
}

.slider-container {
   width: 650px;
   margin-right: 10%;
   margin-left: 10%;
   height: 100px;
}

.slider {
   margin: 20px;
}

.ui-slider {
   background: #ccc;
   background: -webkit-linear-gradient(top, #bbb, #ddd);
   background: -moz-linear-gradient(top, #bbb, #ddd);
   background: linear-gradient(top, #bbb, #ddd);
   -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   height: 6px;
}

.ui-slider-range {
   background-color: #0D6908;
   background: -webkit-linear-gradient(top, #0D6908, #72A307);
   background: -moz-linear-gradient(top, #0D6908, #72A307);
   background: linear-gradient(top, #0D6908, #72A307);
}

.ui-slider-horizontal .ui-slider-handle {
   background: #0D6908;
   background: -webkit-linear-gradient(top, #0D6908, #72A307);
   background: -moz-linear-gradient(top, #0D6908, #72A307);
  ...

JavaScript

/* 
@Author:   Solomon Chijioke Jeffrey (Software Engineer)
@Use:      Custom Javascript to power Solomon Chijioke's Device
@External: You need: JQuery 1.7.2 cdn, JQuery UI 1.8.18 cdn, jQuery UI 1.10.3
@Date:     Copyright (Last Updated 2015)
@Design:   Custom Javascript
*/
$(function() {
   //Slider Definition: 
   $(".slider").each(function() {
         var begin = $(this).data("begin"),
            end = $(this).data("end");
         $(this).slider({
               range: "min",
               value: 0,
               min: 0,
               max: 120,
               animate: true,
               slide: function(event, ui) {
                  //Manipulate the Thermometer Temperature
                  var slideramount = ("#" + $(this).attr("id") + "_temp");
                  $(slideramount).val(ui.value);
               }
            })
            //Thermometer Initial data process
         var slideramount = ("#" + $(this).attr("id") + "_temp");
         $(slideramount).val($(this).slider("value"));
      })
      //Listener: Listens to know when the button is altered 
   $('[name="[temperature]"]').change(function() {
      var value = this.value;
      $('#temperature').slider("value", value);
   });
   //Receptor: Receives information for the altered temperature 
   $('#temperature').on('slidechange', function() {
      $('[name="[temperature]"][value="' + $(this).slider('value') + '"]').prop("checked", true);
   });
});
//Change the Radio button color if selected & Remove previous class.
$(document).ready(function() {
   $('input').click(function() {
      $('input:not(:checked)').parent().removeClass("checked_green");
      $('input:checked').parent().addClass("checked_green");
   });
});