Writing A Word Memory Game In Elm - Part 1: Setting Up an Elm Application With Parcel
Tags: elm
Published: 2019-03-20 13:13:31

---
title: Writing A Word Memory Game In Elm - Part 1: Setting Up an Elm Application With Parcel
published: true
description: A tutorial for writing a nice word memory game in Elm
tags: elm
series: Writing A Word Memory Game In Elm
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zijfhkxcnplbo93mv7if.png
---

This is part 1 of the series "Writing A Word Memory Game In Elm", find:

* Part 1: Setting Up an Elm Application With Parcel
* [Part 2: Modeling And Building a Basic Word Memory Game](https://dev.to/mickeyvip/writing-a-word-memory-game-inelm---part-2-modeling-and-building-a-basic-word-memory-game-583g)
* [Part 3: Rethinking the Model](https://dev.to/mickeyvip/writing-a-word-memory-game-in-elm-part-3-rethinking-the-model-2ajp)
* [Part 4: Spicing Things Up With Randomness](https://dev.to/mickeyvip/writing-a-word-memory-game-in-elm-part-4-spicing-things-up-with-randomness-58ei)
* [Part 5 - More Randomness And More Game](https://dev.to/mickeyvip/writing-a-word-memory-game-in-elm-part-5-more-randomness-and-more-game-1i37)

---

# Preface

One of the most effective ways to learn is by doing. I was looking for a project to improve my Elm skills and a friend gave me an excellent idea -- to write a word memory game.

**Note:** this series of posts reflects my personal learning experience, any constructive feedback is welcome.

# The Memory Game

There is a sentence which the player can read. Several words are then taken out and the player must reconstruct the sentence from memory.

For example, the sentence is: 

> _If you want something done right, you have to do it yourself._

And with several words removed: 

> _If --- want something ---- right, you ---- to do it yourself."_

![Game in action](https://thepracticaldev.s3.amazonaws.com/i/zijfhkxcnplbo93mv7if.png)

The game is pretty simple, but there are many ways it can be be extended:

* The missing words can be presented to the user in-place (as a dropdown), or near the sentence as a list
* Each time the player guesses the correct word, they can be informed straight away or find out the result only when all the words are used
* At the beginning of the game the sentence is visible to the player for several seconds only
* Etc

# Starting the Project

To make the development cycle easier I chose to use Parcel bundler, which supports Elm out of the box since `v1.10.0` and `HMR` since `v1.11.0`.

Let's create a project folder, for example `word-memory-game`, `cd` into it and initialise the NPM project:

```bash
$ npm init -y
```

The `-y` option will accept all defaults and create `package.json` file.

Let's install the Parcel bundler locally (it can also be installed globally):

```bash
$ npm i -D parcel-bundler
```

Following [Parcel's Getting Started](https://parceljs.org/getting_started.html) let's add `index.html`:

```html
<!doctype html>
<html>
<body>
    <script src="./index.js"></script>
</body>
</html>
```
and `index.js`:

```javascript
console.log('Words Memory Game started');
```

Also let's add the following lines to the `scripts` section of `package.json`:

```json
"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
}
```

In order to start the development server let's run:

```bash
$ npm run dev
```

and navigate to [http://localhost:1234](http://localhost:1234)

![Parcel bundler has loaded our application](https://thepracticaldev.s3.amazonaws.com/i/7n44btxdtfwiycpk703a.png)

In order to host our Elm application in a page let's add 

```html
<div id="app"></div>
``` 

to `index.html`:

```html
<!-- index.html -->

<!doctype html>
<html>
<body>
    <div id="app"></div>
    <script src="./index.js"></script>
</body>
</html>
```
Let's create `src` folder and add `Main.elm` to it:

```elm
module Main exposing (main)

import Html

main =
    Html.text "Words Memory Game"
```

and change `index.js` to:

```javascript
import { Elm } from "./src/Main.elm";

Elm.Main.init({
  node: document.getElementById("app")
});
```

After we save all the files, Parcel will automatically initialise an Elm project (including creating `elm.json` file), install needed dependencies and reload. We can also reload the page manually to clear all the previous errors from the console.

![Main.elm loaded and working](https://thepracticaldev.s3.amazonaws.com/i/jeyd5pq4ohbhm2z229e9.png)

Now let's make our Elm skeleton a real Elm application by adding `Msg`, `Model`, `view` and `update`, as well as updating `main`:

```elm
module Main exposing (main)

import Browser
import Html exposing (Html)


type alias Model =
    { sentence : String
    }


initialModel : Model
initialModel =
    { sentence = "The pen is mightier than the sword" }


type Msg
    = NoOp


update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOp ->
            model


view : Model -> Html msg
view model =
    Html.text model.sentence


main : Program () Model Msg
main =
    Browser.sandbox
        { init = initialModel
        , update = update
        , view = view
        }

```

Great! We have our basic "Hello, World!".

I personally like my applications to look nice, so let's add the popular [Bulma](https://bulma.io/) CSS framework in our `index.html` (or we can install it locally and import it) and a `meta` tag that Bulma recommends:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Words Memory Game</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
        />
    </head>
    <body>
        <div id="app" class="section"></div>
        <script src="./index.js"></script>
    </body>
</html>

```

Now in `Main.elm` let's update our `view` function to show a title and a sentence in a nice box:

```elm
view : Model -> Html msg
view model =
    main_ [ class "section" ]
        [ div [ class "container" ]
            [ viewTitle
            , div [ class "box" ]
                [ p
                    [ class "has-text-centered" ]
                    [ text model.sentence ]
                ]
            ]
        ]


viewTitle : Html msg
viewTitle =
    h1 [ class "title has-text-centered" ]
        [ text "Words Memory Game" ]


```

Don't forget to import `Html` and `Html.Attributes` functions:

```elm
import Html exposing (Html, div, h1, main_, p, text)
import Html.Attributes exposing (class)

```

Now our application looks nicer:

![Nice looking application](https://thepracticaldev.s3.amazonaws.com/i/h7637dqbtzr2c8rauq7v.png)

Another touch that I want to add to our game is the ability to show pretty icons. Therefore let's add a link to [Font Awesome](https://origin.fontawesome.com/) web font in our `index.html`:

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Words Memory Game</title>
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
        />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.7.1/css/regular.css"
            integrity="sha384-IG162Tfx2WTn//TRUi9ahZHsz47lNKzYOp0b6Vv8qltVlPkub2yj9TVwzNck6GEF"
            crossorigin="anonymous"
        />
        <link
            rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.7.1/css/fontawesome.css"
            integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+"
            crossorigin="anonymous"
        />
    </head>
    <body>
        <div id="app" class="section"></div>
        <script src="./index.js"></script>
    </body>
</html>

```

Now we are all set up for the next steps, read about them in the [upcoming posts](https://dev.to/mickeyvip/writing-a-word-memory-game-inelm---part-2-modeling-and-building-a-basic-word-memory-game-583g).

The current progress is saved in the repo under a Tag `v0.0`: https://github.com/mickeyvip/words-memory-game/tree/v0.0.