Programming Elm

Remove View Duplication

Now that you’ve split Msg, Model, and update into manageable pieces, you need to return to the view layer. In this section, you will create reusable helper functions to eliminate the excessive code duplication in viewBuild and make it easier to create new form inputs in the future.

Create a Reusable Section

Removing the input duplication will be tricky, so let’s start with the form sections. Notice that you repeat a section tag with a "salad-section" class name. Each of these sections has an h2 heading and form input content. First, you extract the creation of a form section into a reusable function. Add a viewSection function above viewBuild like so:

larger/examples/SaladBuilder05.elm

viewSection : String -> List ...