An example with Reagent for crepl.thegeez.net

crepl_reagent_example.cljs

(ns crepl.reagent.example
  (:require [reagent.core :as r]))

(def temp-data (r/atom {:celsius 20 :fahrenheit 68}))

(defn calc-temperature []
  (let [{:keys [celsius fahrenheit] :as data} @temp-data]
    (if (nil? celsius)
      (assoc data :celsius (* (- fahrenheit 32) 5/9))
      (assoc data :fahrenheit (+ (* celsius 9/5) 32)))))

(defn slider [param value min max]
  [:input {:type "range" :value value :min min :max max
           :style {:width "100%"}
           :on-change (fn [e]
                        (reset! temp-data 
                                {param (.-target.value e)}))}])

(defn temperature-component []
  (let [{:keys [celsius fahrenheit]} (calc-temperature)]
    [:div
     [:h3 "Temperature converter"]
     [:div
      "Celsius: " (int celsius) "c"
      [slider :celsius celsius -30 230]]
     [:div
      "Fahrenheit: " (int fahrenheit) "f"
      [slider :fahrenheit fahrenheit -30 230]]
     ]))

(r/render-component [temperature-component]
                    (.getElementById js/document "app"))