Premise: A website in the United States is unaware of the preferred / expected temperature scale of its visitors. Should it display both the Celsius and Fahrenheit values?
Yes and no. The two sets (scale symbol plus value) should be pre-loaded on the page (no reason to have to ‘fetch’ or do a conversion). We decide to put them side-by-side but within a portal that is only wide enough to show the default set plus the beginning of the other set.
The key to my solution was putting the degree and scale symbol BEFORE the digits. This allowed us to ‘tease’ the Celsius value. The user sees the pattern established in the first set, Fahrenheit. This informs her that the Celsius symbol will likewise be followed by the digits but is not showing. Or, she views the Celsius symbol as a button. In either case, seeking to click or drag, will initiate the :hover property, which moves the C set over. Since it has a higher z-index (stacking order), it will appear above the F set.
See the Pen Temperature Gauge F and C by Matthew Hanley (@cleanandbreezy) on CodePen.
JavasScript Version
Using Javascript, we can add some more features to the interface. We give the C set a click handler to initiate an animation to move to the left.
The C set covers up the Fahrenheit digits but the F symbol remains. Based on her experience with C, the user knows, if she wishes, she can click the F to reveal again the Fahrenheit set fully. And that’s what it does: it returns the C set position to where it was on default. The JS also allows us to set more styles based on a class being applied to the container (“cmode” or “fmode”).
See the Pen Temp Display F and C with Javascript by Matthew Hanley (@cleanandbreezy) on CodePen.