Temperature Conversion

Fahrenheit to Celsius degrees conversion (°F to °C)

by dimshik

HTML

<div id="colorBox">
    
<div class="big" id="scrubbing-horizontal-custom">24<sup>C</sup></div>
    <div class="fahrenheit">75.2<sup>F</sup></div>
    
</div>
<p>
Swipe Left or Right inside the box tho change the temperature
</p>

CSS

/* your custom CSS */



/*
How is BBC changing colours based on temperature? CSS?
http://stackoverflow.com/questions/6522185/how-is-bbc-changing-colours-based-on-temperature-css
*/
/*
.temp-40{background-color:#ff8700;}
 .temp-37-39{background-color:#ff8700;}
 .temp-34-36{background-color:#ff8700;}
 .temp-31-33{background-color:#ff8700;}
 .temp-28-30{background-color:#ff8700;}
 .temp-25-27{background-color:#ff8700;}
 .temp-22-24{background-color:#ff9b25;}
 .temp-19-21{background-color:#ffb230;}
 .temp-16-18{background-color:#ffcd30;}
 .temp-13-15{background-color:#ffdc36;}
 .temp-10-12{background-color:#fff83b;}
 .temp-7-9{background-color:#defc4e;}
 .temp-4-6{background-color:#c3ff5d;}
 .temp-1-3{background-color:#aaffaa;}
 .temp-0{background-color:#69c3ff;}
 .temp--1--3{background-color:#69c3ff;}
 .temp--4--6{background-color:#69c3ff;}
 .temp--7--9{background-color:#69c3ff;}
 .temp--10--12{background-color:#69c3ff;}
 .temp--13--15{background-color:#69c3ff;}
 .temp--16--18{background-color:#69c3ff;}
 .temp--19--21{background-color:#69c3ff;}
 .temp--22--24{background-color:#69c3ff;}
 .temp--25--27{background-color:#69c3ff;}
 .temp--28--30{background-color:#69c3ff;}
 .temp--31--33{background-color:#69c3ff;}
 .temp--34--36{background-color:#69c3ff;}
 .temp--37--39{background-color:#69c3ff;}
 .temp--40{background-color:#69c3ff;}
*/


/*new values*/

 .temp-40{background-color:#e45d27;}
 .temp-37-39{background-color:#f18162;}
 .temp-34-36{background-color:#e98c38;}
 .temp-31-33{background-color:#ffa037;}
 .temp-28-30{background-color:#ffb26a;}
 .temp-25-27{background-color:#faca57;}
 .temp-22-24{background-color:#ffd84f;}
 .temp-19-21{background-color:#ffec83;}
 .temp-16-18{background-color:#fff9c6;}
 .temp-13-15{background-color:#c2e254;}
 .temp-10-12{background-color:#d0ea7c;}
 .temp-7-9{background-color:#83d160;}
 .temp-4-6{background-color:#a2df86;}
 .temp-1-3{background-color:#bbe8a4;}
 .temp-0{background-color:#00b26f;}
 .temp--1--3{background-color:#5cc790;}
...

JavaScript

/*! Scrubbing 02-01-2014 
 * Fabrice Weinberg 
 * http://codepen.io/FWeinb/pen/ICspx
 */
!function(a,b){var c=function(a,b){return a?"string"==typeof a?b[a]:a:void 0},d=function(a,b,d,e,f){a[f]=b?c(b[f],e)||d[f]:d[f]},e=function(a,b,c,d,e){Array.isArray(a)?a.forEach(function(a){a[b](c,d,e)}):a[b](c,d,e)},f={init:function(){},start:function(a){return parseInt(a.node.textContent,10)},change:function(a,b){a.node.textContent=b},end:function(){}},g=function(a,b,c,d){this.name=a,this.prop=b,this.factor=c||1,this.divider=d||1};g.prototype={coordinate:function(a){return a[this.prop]},value:function(a,b){return this.factor*Math.floor((b-a)/this.divider)}};var h=function(a,b,c){return function(d){return new g(a,b,c,d)}},i=h("Horizontal","clientX"),j=h("Vertical","clientY",-1),k=function(){var b,c,d=function(){this.removeEventListener("mousemove",b,!1),c&&c.options.adapter.end(c)},e=function(e){if(e.target.scrubbingElement){e.preventDefault(),c=e.target.scrubbingElement;var f=c.options.adapter.start(c),g=function(a){return c.options.resolver.coordinate(a)},h=g(e);return b=function(a){if(1===a.which){var b=c.options.resolver.value(h,g(a));c.options.adapter.change(c,f+b,b)}else d()},a.addEventListener("mousemove",b,!1),a.addEventListener("mouseup",d,!1),!0}},f=function(){a.addEventListener("mousedown",e,!1),f=function(){}};return{init:function(){f()},remove:function(){}}}(),l=function(a){var b,c,d=function(){a.removeEventListener("touchmove",c,!1),b&&b.options.adapter.end(b)},e=function(d){if(1===d.targetTouches.length){var e=d.targetTouches[0];if(e.target.scrubbingElement){d.preventDefault(),b=e.target.scrubbingElement;var f=b.options.adapter.start(b),g=function(a){return b.options.resolver.coordinate(a)},h=g(e);c=function(a){if(1===a.targetTouches.length){a.preventDefault();var...