Quickstart Elm 0.19, part 3

In this article series, we’re looking into learning Elm as quickly as possible, by buiding a few mini apps and understanding its idiosyncrasies along the way.

Note: Examples in this article use Elm 0.19.

Building a simple FizzBuzz app in Elm

FizzBuzz is a word game for kids. The purpose is to teach math, namely division.

The game is simple: each player calls out a number, starting from 1. If a number can be divided by three, a player needs to call out Fizz instead of a number. Furthermore, if a number can be divided by five, a player needs to call out Buzz instead of a number.

Finally, if a number can be divided by both 3 and 5, a player needs to call out FizzBuzz.

Since this is a well-known game, and a relatively simple problem, it is a great way to test the level of knowledge of a programmer.

Solving FizzBuzz in JavaScript

In order to go about solving this problem, in Elm 0.18 we could introduce a new operator, the modulus operator, %. This operator was returning the remainder of a division.

In version 0.18, we could have simply visited the Elm REPL online, and once there, we could have ran the following example code:

12 % 10

The result would be 2, since that is the result of the above operation.

Unfortunately, in Elm 0.19, this approach no longer works. Instead, running the above operation - 12 % 10 - in Elm REPL with version 0.19, will return the following error:

---- Elm 0.19.0 ----------------------------------------------------------------
Read <https://elm-lang.org/0.19.0/repl> to learn more: exit, help, imports, etc.
--------------------------------------------------------------------------------
> 12 % 10
-- UNKNOWN OPERATOR -------------------------------------------------------- elm

Elm does not use (%) as the remainder operator:

4|   12 % 10
        ^
If you want the behavior of (%) like in JavaScript, switch to:
<https://package.elm-lang.org/packages/elm/core/latest/Basics#remainderBy>

If you want modular arithmetic like in math, switch to:
<https://package.elm-lang.org/packages/elm/core/latest/Basics#modBy>

The difference is how things work when negative numbers are involved.

So what are we to do?

I believe it is important to understand the basics of how this used to work in Elm 0.18. However, to avoid dealing with an older, deprecated version of Elm - instead we’ll use vanilla JavaScript.

Writing a FizzBuzz app in vanilla JavaScript

Here’s the code:

for(var i = 0; i < 20; i++){
 if (i % 15 === 0) {
   console.log("FizzBuzz");
 }
 if (i % 5 === 0) {
   console.log("Buzz");
 }
 if (i % 3 === 0) {
    console.log("Fizz");
 }
 else {
   console.log(i)
 }
}

The above code is very, very basic. To avoid as much confusion as possible, I’m even using ES5 with the var declaration!

In the code above, we can see the good old for loop, which will run 20 iterations, and at the end of each iteration, will increment the value of variable i by 1.

On each run, the value of i will be different, and each time, it will go through a series of checks. The first time the modulus operator returns no remainder on either of the three conditions, the corresponding word will print to the console, be it “Fizz”, “Buzz”, or “FizzBuzz”.

All other times, the number value of the iterator variable i will print to the console.

Let’s now write this app in Elm 0.19.

Writing a FizzBuzz app in Elm 0.19

Here’s our app’s code:

module Main exposing (main)

import Browser
import Html exposing (text)

fizzBuzz = "FizzBuzz"
fizz = "Fizz"
buzz = "Buzz"

fizzBuzzInput value =
    if modBy 15 value == 0 then
        fizzBuzz
    else if modBy 5 value == 0 then
        buzz
    else if modBy 3 value == 0 then
        fizz
    else (String.fromInt value)
    
main = 
    text (fizzBuzzInput 30)

The above app can be seen live inside Ellie app.

In the next article, we’ll quickly go over some additional Elm concepts.