Skip to content

Instantly share code, notes, and snippets.

@nicholasruunu
Created October 13, 2016 13:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nicholasruunu/02d34ab96ebc4b87a9d457caab5e62a6 to your computer and use it in GitHub Desktop.
Save nicholasruunu/02d34ab96ebc4b87a9d457caab5e62a6 to your computer and use it in GitHub Desktop.
Elm vs jQuery
module Main exposing (..)
import Html exposing (..)
import Html.App as App
import Html.Attributes exposing (..)
import Json.Decode as Json exposing ((:=))
import Task
import Http
type alias Member =
{ name : String
, github : String
}
type Msg
= NewGitHubData (List Member)
| FetchError Http.Error
decodeMember : Json.Decoder (List Member)
decodeMember =
Json.list
(Json.object2 Member
("name" := Json.string)
("github" := Json.string)
)
fetchGithubData : Cmd Msg
fetchGithubData =
let
url =
"https://raw.githubusercontent.com/phpse/medlemsregister/master/members.json"
in
Http.get decodeMember (url)
|> Task.perform FetchError NewGitHubData
renderMember : Member -> Html Msg
renderMember member =
let
githubUrl =
"https://github.com/" ++ member.github
githubAvatar =
githubUrl ++ ".png?size=200"
in
li []
[ a [ href githubUrl, target "_blank" ]
[ img [ src githubAvatar ] []
, span [] [ text member.name ]
]
]
init : ( List Member, Cmd Msg )
init =
( [], fetchGithubData )
update : Msg -> List Member -> ( List Member, Cmd Msg )
update msg memberList =
case msg of
FetchError _ ->
( memberList, Cmd.none )
NewGitHubData githubMemberList ->
( githubMemberList, Cmd.none )
view : List Member -> Html Msg
view memberList =
ul [] (List.map renderMember memberList)
main : Program Never
main =
App.program
{ init = init
, update = update
, view = view
, subscriptions = always Sub.none
}
jQuery(document).ready(function($) {
"use strict";
var $membersContainer = $('#js-members');
var $memberCountContainer = $('#js-members-count');
$.ajax('https://raw.githubusercontent.com/phpse/medlemsregister/master/members.json', {
dataType: 'json',
success: function(members) {
var $memberList = $('<ul/>');
for (var i in members) {
var name = members[i].name;
var githubUrl = 'https://github.com/' + members[i].github;
var avatarUrl = githubUrl + '.png?size=200';
$memberList.append(
$('<li/>').append(
$('<a/>').attr({ href: githubUrl, target: '_blank' }).append(
$('<img/>').attr('src', avatarUrl),
$('<span/>').text(name)
)
)
);
}
$membersContainer.append($memberList);
$memberCountContainer.text('(' + members.length + ')');
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment