Monthly Archives: July 2016

An Introduction to Elm Series: Solution to ‘Buttons’ example 1

 in Elm by

In http://guide.elm-lang.org/architecture/user_input/buttons.html, you are given a working code that produces a simple counter which can be incremented or decremented via two buttons on an HTML page.

Your task is to add a new feature to this code, which is to create a new button that will reset the counter. Following you will find a proposed solution to the task. What we did was to create a new message which when received it would zero the model value and then we attached it to a new button we created.

The full solution is as follows and we highlighted all the lines that were added for this additional functionality to work:

import Html exposing (Html, button, div, text)
import Html.App as Html
import Html.Events exposing (onClick)



main =
  Html.beginnerProgram
    { model = model
    , view = view
    , update = update
    }



-- MODEL


type alias Model = Int


model : Model
model =
  0



-- UPDATE


type Msg
  = Increment
  | Decrement
  | Reset


update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

    Reset ->
      0

-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (toString model) ]
    , button [ onClick Increment ] [ text "+" ]
    , button [ onClick Reset ] [ text "Reset" ]
    ]

You can download the solution from here [download id=”1791″]

Create an HTML page with no JavaScript that will redirect the user after a few seconds 1

 in HowTos  tagged delay / html / no javascript / redirect by

The following sample page will redirect the user to bytefreaks.net after 5 seconds. This page does not require JavaScript to be enabled on the user’s browser.

To modify the delay time and the redirect path, you need to edit the following line in the head of the page <meta http-equiv="refresh" content="5;URL=http://www.bytefreaks.net/">. In this example we set the delay to 5 seconds and the redirect url to be http://www.bytefreaks.net/.

You can download a working example of this code here ([download id=”1779″]). If you rename the file to index.html and place it in a folder, it will be the first file that your webserver will read and the redirect will be applied.

<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bytefreaks.net Redirect Page</title>
    <meta name="description" content="A page that will redirect the user to bytefreaks.net after 5 seconds">
    <meta name="author" content="Bytefreaks.net">
    <meta http-equiv="refresh" content="5;URL=http://www.bytefreaks.net/">
  </head>

  <body bgcolor="#ffffff">
    <center>You will be automatically redirected to <a href="http://bytefreaks.net">bytefreaks.net</a> as this resource is not available.</center>
  </body>
</html>