GiphySearch.elm

// Main.elm
module Main exposing (main)

import AppModel exposing (..)
import View exposing (view)

import Html exposing (Html)

main : Program Never Model Msg
main =
  Html.program
      { init = initModel
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

// AppModal.elm
module AppModel exposing (..)
import Http
import Json.Decode as Decode

type alias Model =
  { input: String
  , url: String
  , loading: Bool
  , title: Maybe String
  }

type Msg
  = Input String
  | Submit
  | Request (Result Http.Error String)


initModel : (Model, Cmd Msg)
initModel =
  { input = ""
  , url = ""
  , loading = False
  , title = Nothing
  }
    ![]

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Input value ->
      { model | input = value }
        ![]
    Submit ->
      ({ model | loading = True }, getRandomGiphy model)
    Request (Ok url) ->
      { model | url = url, loading = False, title = Just model.input, input = "" }
        ![]
    Request (Err _) ->
      (model, Cmd.none)


-- HTTP
getRandomGiphy: Model -> Cmd Msg
getRandomGiphy model =
  let
    url =
        "https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=" ++ model.input
  in
    Http.send Request (Http.get url decodeUrl)

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

-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none


// View.elmx
module View exposing (view)

import AppModel exposing (Model, Msg(..))

import Html exposing (Html)
import Html.Attributes
import Html.Events exposing (onClick)

view : Model -> Html Msg
view model =
  let
    url = model.url
    input = Input
    submit = Submit
  in
    <section class="grommetux-box grommetux-box--direction-column grommetux-box--justify-center grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-vertical-medium grommetux-section">
      <article class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large grommetux-article ghODnj">
        <div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large">
          <h1>Giphy Search</h1>
          <div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large">
            <form class="form-inline centered">
              <div class="form-group">
                <input class="form-control" type="text" placeholder="Enter a search string" onInput={ input } value={model.input} />
                <button type="button" class="grommetux-button grommetux-button--primary" onClick={ submit }>Submit</a>
              </div>
            </form>
          </div>
        </div>
        {renderTitle model}
        <div class="grommetux-box grommetux-box--direction-column grommetux-box--align-center grommetux-box--responsive grommetux-box--pad-large">
          <div class="loading-wrapper">
            {loading model}
          </div>
        </div>
        <div class="col-xs-12 centered">
          <img class="img-responsive img-rounded" src={url} />
        </div>
      </article>
    </section>

loading : Model -> Html Msg
loading model =
  case model.loading of
    True ->
      <div class="loading">Loading...</div>
    False ->
      <div></div>

renderTitle : Model -> Html Msg
renderTitle model =
  case model.title of
    Just val ->
      <div class="col-xs-12 centered">
        <h2 class="display-3">{=val}</h2>
      </div>
    Nothing ->
      <div></div>