elm-package.json

{
    "version": "1.0.0",
    "summary": "helpful summary of your project, less than 80 characters",
    "repository": "https://github.com/USER/PROJECT.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "2.1.0 <= v < 3.0.0",
        "evancz/elm-effects": "1.0.0 <= v < 2.0.0",
        "evancz/elm-html": "4.0.1 <= v < 5.0.0",
        "evancz/elm-http": "1.0.0 <= v < 2.0.0",
        "evancz/start-app": "2.0.0 <= v < 3.0.0"
    },
    "elm-version": "0.15.1 <= v < 0.16.0"
}

Main.elm

import Effects exposing (Never)
import RandomGif exposing (init, update, view)
import StartApp
import Task


app =
  StartApp.start
    { init = init "funny cats"
    , update = update
    , view = view
    , inputs = []
    }


main =
  app.html


port tasks : Signal (Task.Task Never ())
port tasks =
  app.tasks

RandomGif.elm

module RandomGif where

import Effects exposing (Effects, Never)
import Html exposing (..)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import Http
import Json.Decode as Json
import Task


-- MODEL

type TickStatus = Waiting | Canceled

type alias Model =
    { topic : String
    , gifUrl : String
    , tickStatus : TickStatus
    }

init : String -> (Model, Effects Action)
init topic =
  ( Model topic "assets/waiting.gif" Waiting
  , Effects.batch [ getRandomGif topic, tick ]
  )


-- UPDATE

type Action
    = RequestMore
    | Tick
    | NewGif (Maybe String)


update : Action -> Model -> (Model, Effects Action)
update action model =
  case action of
    RequestMore ->
      let
        updatedModel = {model | tickStatus <- Canceled}
      in
        (updatedModel, getRandomGif model.topic)

    Tick ->
      let
        effect =
          if model.tickStatus == Waiting
          then Effects.batch [ getRandomGif model.topic, tick]
          else Effects.none
      in
      (model, effect)

    NewGif maybeUrl ->
      ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) model.tickStatus
      , Effects.none
      )


-- VIEW

(=>) = (,)


view : Signal.Address Action -> Model -> Html
view address model =
  div [ style [ "width" => "200px" ] ]
    [ h2 [headerStyle] [text model.topic]
    , div [imgStyle model.gifUrl] []
    , button [ onClick address RequestMore ] [ text "More Please!" ]
    , div [] [ text ("tick status: " ++ (toString model.tickStatus)) ]
    ]


headerStyle : Attribute
headerStyle =
  style
    [ "width" => "200px"
    , "text-align" => "center"
    ]


imgStyle : String -> Attribute
imgStyle url =
  style
    [ "display" => "inline-block"
    , "width" => "200px"
    , "height" => "200px"
    , "background-position" => "center center"
    , "background-size" => "cover"
    , "background-image" => ("url('" ++ url ++ "')")
    ]


-- EFFECTS

getRandomGif : String -> Effects Action
getRandomGif topic =
  Http.get decodeUrl (randomUrl topic)
    |> Task.toMaybe
    |> Task.map NewGif
    |> Effects.task


randomUrl : String -> String
randomUrl topic =
  Http.url "http://api.giphy.com/v1/gifs/random"
    [ "api_key" => "dc6zaTOxFJmzC"
    , "tag" => topic
    ]


decodeUrl : Json.Decoder String
decodeUrl =
  Json.at ["data", "image_url"] Json.string


tick : Effects Action
tick =
  Task.sleep (2 * 1000)
    |> Task.map (\_ -> Tick)
    |> Effects.task