Main.js

exports.create = function () {
  var subs = [];
  return {
    event: function(sub) {
      subs.push(sub);
    },
    push: function(a) {
      return function() {
        for (var i = 0; i < subs.length; i++) {
          subs[i](a);
        }
      };
    }
  };
};

window.SUBS = [];

exports.storeSub = function(screen) {
  return function(tag) {
    return function(event) {
      return function(sub) {
        console.log (screen);
        var el = document.getElementById(tag);
        el.addEventListener(event, function(e) {
          if (event == "change" || event == "keyup")
            sub(e.target.value)();
          else if (event == "mousemove") 
            sub(e.clientX)();
          else
            sub(tag + "-" + event)();
        });

        window.SUBS.push(sub);
      }
    }
  }
}

exports.tweakView = function(screen) {
  return function(data) {
    return function() {
      data.forEach(function(each) {
        var el = document.getElementById(each.value0);
        var keys = Object.keys(each.value1);

        keys.forEach(function(key) {
          el.style[key] = each.value1[key];
        });
      });
    }
  }
}

exports.createRec = function(record) {
  return record;
}

Main.purs

module Main where
import Control.Monad.Eff (Eff)
import Control.Plus ((<|>))
import Data.Tuple (Tuple(..))
import FRP (FRP)
import FRP.Behavior (sample_, step)
import FRP.Event (Event, subscribe)
import Prelude

import Data.String as S
foreign import create
  :: forall eff a
   . Eff (frp :: FRP | eff)
         { event :: Event a
         , push :: a -> Eff (frp :: FRP | eff) Unit
         }


data Rec

foreign import storeSub :: forall a b eff.  a -> String -> String -> (b ->  Eff (frp::FRP | eff) Unit) -> Unit
foreign import tweakView :: forall a b c eff. c -> Array (Tuple a b) ->  Eff eff Unit
foreign import createRec :: forall a. a -> Rec

getSig screen tag event initValue = do
  o <- create
  let behavior = step initValue o.event
  let x = storeSub screen tag event o.push
  pure $ {behavior : behavior , event : o.event}

inActive = {background: "#cccccc"}
progress1 = {background: "#89b0fd"}
progress2 = {background: "#6697f9"}
active = {background: "#1b62ef"}

checkForNull a count = if (not $ S.null a)
                          then count + 1
                          else count

validatePay benificiary amount remark = let v1 = 0
                                            v2 = checkForNull benificiary v1
                                            v3 = checkForNull amount v2
                                            v4 = checkForNull remark v3 in
                                        case v4 of
                                          0 -> createRec inActive
                                          1 -> createRec progress1
                                          2 -> createRec progress2
                                          3 -> createRec active
                                          _ -> createRec inActive 

main screen = do
  sig1 <- getSig screen "#benificary" "keyup" ""
  sig2 <- getSig screen "#amount" "keyup" ""
  sig3 <- getSig screen "#remark" "keyup" ""

  let behavior = validatePay <$> sig1.behavior <*> sig2.behavior <*> sig3.behavior

  sample_ behavior (sig1.event <|> sig2.event <|> sig3.event) `subscribe` (\x -> tweakView screen [Tuple "#submit" x])