Skip to content

Exercises 1 - 3 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Exercises 1 - 3 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4634ba3
exercise 1
Jul 15, 2016
5515805
exercise 2
Jul 15, 2016
5eac6eb
exercise 3
Jul 17, 2016
bfce96c
update exercise 3 to get just a random value from JS (not all the mod…
Jul 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 139 additions & 35 deletions src/Main.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@ import Html.Attributes exposing (..)
import Html.Events exposing (..)


main : Program Never
main : Program (Maybe RandomCount)
main =
Html.program
Html.programWithFlags
{ init = init
, view = view
, update = update
Expand All @@ -21,21 +21,78 @@ main =


type alias Model =
{ count : Int }
{ count : RandomCount
, countedDays : Int
, difference : DateDifference
, date1 : DateValue
, date2 : DateValue
}


initialModel : Model
initialModel =
{ count = 0
, countedDays = 0
, difference =
{ years = 0
, months = 0
, days = 0
}
, date1 = "13/07/2000"
, date2 = "17/07/2016"
}


init : Maybe RandomCount -> ( Model, Cmd Msg )
init randomCount =
let
model =
case randomCount of
Just randomCount ->
{ initialModel | count = randomCount }

Nothing ->
initialModel
in
( model, Cmd.none )


type alias RandomCount =
Int


type alias NumberOfDays =
Int


type alias DayDifference =
String


init : ( Model, Cmd Msg )
init =
( { count = 0 }, Cmd.none )
type alias DateValue =
String


type alias DateDifference =
{ years : Int
, months : Int
, days : Int
}



-- UPDATE


type Msg
= GetCount Int
= GetCount RandomCount
| DoCount
| DoCountDays
| CountDays NumberOfDays
| UpdateDate1 DateValue
| UpdateDate2 DateValue
| CalculateDayDifference
| UpdateDayDifference DateDifference


update : Msg -> Model -> ( Model, Cmd Msg )
Expand All @@ -47,6 +104,28 @@ update msg model =
DoCount ->
( model, outputToJS () )

UpdateDate1 value ->
( { model | date1 = value }, Cmd.none )

UpdateDate2 value ->
( { model | date2 = value }, Cmd.none )

DoCountDays ->
( model, countDays () )

CountDays value ->
( { model | countedDays = value }, Cmd.none )

CalculateDayDifference ->
let
{ date1, date2 } =
model
in
( model, calculateDateDifference ( date1, date2 ) )

UpdateDayDifference difference ->
( { model | difference = difference }, Cmd.none )



-- SUBSCRIPTIONS
Expand All @@ -58,9 +137,25 @@ port outputToJS : () -> Cmd msg
port inputFromJS : (Int -> msg) -> Sub msg


port countDays : () -> Cmd msg


port daysCounted : (NumberOfDays -> msg) -> Sub msg


port calculateDateDifference : ( DateValue, DateValue ) -> Cmd msg


port dateDifference : (DateDifference -> msg) -> Sub msg


subscriptions : Model -> Sub Msg
subscriptions model =
inputFromJS GetCount
Sub.batch
[ inputFromJS GetCount
, daysCounted CountDays
, dateDifference UpdateDayDifference
]



Expand All @@ -85,54 +180,63 @@ exampleView model =
]


exercise1View : Html Msg
exercise1View =
exercise1View : Model -> Html Msg
exercise1View model =
div
[ class "card-exercise1 mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-offset" ]
[ div [ class "mdl-card__title mdl-card--expand" ]
[ h2 [ class "mdl-card__title-text" ] [ text "Exercise 1" ]
]
, h2
[ class "result" ]
[ text "Result?" ]
[ text <| toString model.countedDays ]
, div [ class "mdl-card__actions mdl-card--border" ]
[ a
[ class "mdl-button mdl-js-button mdl-js-ripple-effect button" ]
[ class "mdl-button mdl-js-button mdl-js-ripple-effect button", onClick DoCountDays ]
[ text "Calculate" ]
]
]


exercise2View : Html Msg
exercise2View =
div
[ class "card-exercise1 mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-offset" ]
[ div [ class "mdl-card__title mdl-card--expand" ]
[ h2 [ class "mdl-card__title-text" ] [ text "Exercise 2" ]
]
, div []
[ div [ id "date1-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ]
[ input [ id "date1", type' "text", class "mdl-textfield__input", placeholder "Date 1" ] []
exercise2View : Model -> Html Msg
exercise2View model =
let
{ years, months, days } =
model.difference
in
div
[ class "card-exercise1 mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-offset" ]
[ div [ class "mdl-card__title mdl-card--expand" ]
[ h2 [ class "mdl-card__title-text" ] [ text "Exercise 2" ]
]
, div [ id "date2-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ]
[ input [ id "date2", type' "text", class "mdl-textfield__input", placeholder "Date 2" ] []
, div []
[ div [ id "date1-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ]
[ input [ id "date1", type' "text", class "mdl-textfield__input", placeholder "DD/MM/YYYY", value model.date1, onInput UpdateDate1 ] []
]
, div [ id "date2-wrapper", class "mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell mdl-cell--10-col mdl-cell--1-offset" ]
[ input [ id "date2", type' "text", class "mdl-textfield__input", placeholder "DD/MM/YYYY", value model.date2, onInput UpdateDate2 ] []
]
]
, h2
[ class "result" ]
[ text <| toString years ++ " years"
, br [] []
, text <| " or " ++ toString months ++ " months"
, br [] []
, text <| " or " ++ toString days ++ " days"
]
, div [ class "mdl-card__actions mdl-card--border" ]
[ a
[ class "mdl-button mdl-js-button mdl-js-ripple-effect button", onClick CalculateDayDifference ]
[ text "Differenced" ]
]
]
, h2
[ class "result" ]
[ text "Result?" ]
, div [ class "mdl-card__actions mdl-card--border" ]
[ a
[ class "mdl-button mdl-js-button mdl-js-ripple-effect button" ]
[ text "Differenced" ]
]
]


view : Model -> Html Msg
view model =
div [ class "mdl-grid" ]
[ exampleView model
, exercise1View
, exercise2View
, exercise1View model
, exercise2View model
]
28 changes: 26 additions & 2 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,35 @@
require("./styles.css");

var getRandom = function () {
return Math.round(Math.random() * 100);
}

var Elm = require('./Main');
var app = Elm.Main.fullscreen();
var app = Elm.Main.fullscreen(getRandom());

app.ports.outputToJS.subscribe(function () {
console.log('Elm -> JS');
var random = Math.round(Math.random() * 100);
var random = getRandom();
console.log('JS -> Elm ' + random);
app.ports.inputFromJS.send(random);
});

app.ports.countDays.subscribe(function () {
var to = moment([2016, 1, 1]);
var from = moment();
var days = from.diff(to, 'days');
app.ports.daysCounted.send(days);
});

app.ports.calculateDateDifference.subscribe(function (dates) {
var format = 'DD/MM/YYYY';
var to = moment(dates[0], format);
var from = moment(dates[1], format);
var diff = {
years: from.diff(to, 'years'),
months: from.diff(to, 'months'),
days: from.diff(to, 'days')
};
console.log('diff', diff);
app.ports.dateDifference.send(diff);
});