Capitals & Countries <| quiz game F# ++ Elm
This exercise starts with F# version of quiz game (for the given country, type the name of its capital city) that is 21 lines of code placed in a single F# script file.
The World Bank APIs and F# Data: WorldBank Provider are used to get pairs of countries and corresponding capitals.
Run the script on Mac terminal:
fsharpi CapitalsQuiz.fsx
or on Windows cmd:
fsi CapitalsQuiz.fsx
The next part of the exercise is to host quiz game online. I will examine Elm language to build the game UI. The plan is to re-use the part of F# code which delivers random pairs of countries & capitals, and host it in Azure Functions.
Modified version for function app:
Elm has great support for handling HTTP requests, though F# type provider is so easy to use that I just don’t want to mess directly with World Bank APIs on UI.
Elm language promotes basic pattern that breaks up into the Model, Update, and View functions. Also, I will use The Material Design package for Elm to compose fancy View, but the rest is going to be vanilla Elm code.
Model and Messages contract:
The prime piece of Update function:
The View function is a simple DOM composition, but if you are interested, follow the link to a full listing.
The big deal about Elm is that for creating reusable views, there is no need to build components, directives, templates or other stuff which is sometimes leaky. Instead, we code helper functions and compose the main view from it.
Helper function example:
Try online how this all works together - Capitals & Countries quiz game
blog comments powered by Disqus