Skip to content

Instantly share code, notes, and snippets.

@thegeez
Created February 5, 2017 16:51
Show Gist options
  • Save thegeez/82b82c4890b215e30fe49fe239cc6458 to your computer and use it in GitHub Desktop.
Save thegeez/82b82c4890b215e30fe49fe239cc6458 to your computer and use it in GitHub Desktop.
An example with Reagent for crepl.thegeez.net
(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"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment