Jadelet Example Garden

7GUIs Temperature Converter


The task is to build a frame containing two textfields TC and TF representing the temperature in Celsius and Fahrenheit, respectively. Initially, both TC and TF are empty. When the user enters a numerical value into TC the corresponding value in TF is automatically updated and vice versa. When the user enters a non-numerical string into TC the value in TF is not updated and vice versa. The formula for converting a temperature C in Celsius into a temperature F in Fahrenheit is C = (F - 32) (5/9) and the dual direction is F = C (9/5) + 32.

Temperature Converter increases the complexity of Counter by having a bidirectional dataflow between the Celsius and Fahrenheit value and the need to check the user input for validity. A good solution will make the bidirectional dependency very clear with minimal boilerplate code for the event-based connection of the two textfields.

  span Celsius
  span Fahrenheit
{Observable} = Jadelet
{round} = Math

# TODO: Need to handle error states and bi-directionality better

fahrenheit = Observable 32
celsius = Observable 0

fahrenheit.observe (f) ->
  celsius round (f - 32) * 5 / 9

celsius.observe (c) ->
  fahrenheit round c * 9 / 5 + 32 

h1Element = Template
  celsius: celsius
  fahrenheit: fahrenheit