Bookmarklet for temperature conversion

How to make a bookmarklet for temperature conversion

A bookmarklet is a tiny JavaScript program stored as a bookmark. In principle, to start the program you could type the whole script text into the browser's address field each time, like a URL, and press Enter. But for convenience, like with URLs, we will create a bookmark from the script text.
[This example is for Firefox.^*) You should have the Bookmarks toolbar visible (menu: View>>Toolbars).]
^*) Bookmarklets stopped working with Firefox versions above 4; but as of 2020, after a small modification, it seems to be working fine again.

Here is what you have to do to create a bookmarklet

... in this case, a conversion tool for temperature scales (Celsius/Fahrenheit):

Right-click on bookmarks toolbar, select "New Bookmark..."
Enter a name, eg. °F<->°C
In the "Location" field, paste the following script text (there can be no line breaks in the field; make sure you got the whole text!):
javascript:s=document.getSelection();if(s==''){void(s=prompt('Input temperature value (no units):',''))};if(s && isNaN(Number(s)))alert('Input or highlight a number please.');else if(s)alert('(°F - 32) / 1.8 = °C\n'+s+' °F = '+Math.round((s-32)/.18)/10+' °C\n\n1.8 ×°C + 32 = °F\n'+s+' °C = '+Math.round(18*s+320)/10+' °F')
Click the "Add" button to save the bookmarklet. (All other fields can be left blank.)

How to use it

There are two ways to use your bookmarklet: Input mode, and Capture mode.

Input mode: Just click on the bookmark. A dialog box will appear and ask you to input a temperature value.

Capture mode: In the text of any web page, select/highlight a number, then click on the bookmark. The tool will convert the highlighted value.

Note 1: Input or highlight numbers only, no temperature units (or other text). Your conversion tool works in both directions at the same time, so you don't have to specify what temperature scale your input is. Just select the matching answer from the output.
Note 2: The conversion formula for each direction is given along with the respective output value.

How it works (Tech stuff)

This is pretty much straightforward:

The pseudoprotocol "javascript:" (instead of the usual "http://") at the beginning indicates that the following is a script, not a URL.

First, a possible highlighted portion of text on the active web page is assigned to a variable, s, as a string. This becomes the input value. If there is no highlighted text (i.e. the string s is empty), the input box is invoked by the "prompt" command and its input value assigned to s.

The 2nd "if" statement checks whether s exists now but is not a number ("isNaN"), or contains text other than numbers, after trying to convert s into a number ("Number(s)"). If s -- which could be the input or the highlighted text -- is not a number, an according message will be displayed using the "alert" command.
This is obviously just to make it fool-proof.

Next, in the "else" portion (s, if existent, being a number here, since it is the only remaining alternative), the conversion is performed -- first Fahrenheit to Celsius, then vice versa, using the same input value. The calculations are done while building the output string for the alert-box, in order to keep the script compact.

The "Math.round" instructions will round their argument values (the temperature results) to an integer by default. In our case, rounding to the first decimal place was desired. Therefore, the argument value is multiplied by 10 prior to rounding, and the resulting rounded integer (now augmented by one integer place, or ten times the correct value) is then divided by 10 again, yielding exactly one decimal place (or none if the last digit was zero).

The function "void" is utilized at one point in the script to suppress generation of a return value that would cause problems in these kinds of "URL scripts", or bookmarklets. The "void" function always returns "undefined".

Created: Nov 28, 2009 / Updated: Dec 9, 2020
by Daniel Palloks