From 9cd8c9cfded465fd00b9fa059f5d5fb2cc9ba289 Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Sun, 24 Feb 2019 15:46:51 -0800
Subject: [PATCH] Expose all Html imports by default

---
 HelloWorld.elm |  26 ++++++------
 Part1.elm      |  46 ++++++++++-----------
 Part2.elm      |  52 ++++++++++++------------
 Part3.elm      |  52 ++++++++++++------------
 Part4.elm      |  72 ++++++++++++++++-----------------
 Part5.elm      |  72 ++++++++++++++++-----------------
 Part6.elm      | 104 ++++++++++++++++++++++++------------------------
 Part7.elm      | 106 ++++++++++++++++++++++++-------------------------
 Part8.elm      | 106 ++++++++++++++++++++++++-------------------------
 9 files changed, 318 insertions(+), 318 deletions(-)

diff --git a/HelloWorld.elm b/HelloWorld.elm
index 58b305c..5ec89dd 100755
--- a/HelloWorld.elm
+++ b/HelloWorld.elm
@@ -1,9 +1,9 @@
 module HelloWorld exposing (Model, Msg(..), init, main, update, view)
 
 import Browser
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -55,18 +55,18 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
-        [ Html.Attributes.class "skeleton-elm-project" ]
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+    div
+        [ class "skeleton-elm-project" ]
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.div
-            [ Html.Attributes.class "waves-effect waves-light btn-large"
-            , Html.Events.onClick ChangeText
+        , div
+            [ class "waves-effect waves-light btn-large"
+            , onClick ChangeText
             ]
-            [ Html.text model.buttonLabel ]
+            [ text model.buttonLabel ]
         ]
diff --git a/Part1.elm b/Part1.elm
index 5cc12f3..6bd9136 100755
--- a/Part1.elm
+++ b/Part1.elm
@@ -1,9 +1,9 @@
 module Part1 exposing (Model, Msg(..), init, main, update, view)
 
 import Browser
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -52,33 +52,33 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
diff --git a/Part2.elm b/Part2.elm
index 12740c1..0cc181f 100755
--- a/Part2.elm
+++ b/Part2.elm
@@ -1,9 +1,9 @@
 module Part2 exposing (Model, Msg(..), init, main, update, view)
 
 import Browser
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -51,38 +51,38 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text model.currentText ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text model.currentText ]
             ]
         ]
diff --git a/Part3.elm b/Part3.elm
index 7f70da4..a221669 100755
--- a/Part3.elm
+++ b/Part3.elm
@@ -2,9 +2,9 @@ module Part3 exposing (Model, Msg(..), defaultKey, init, main, translateText, up
 
 import Browser
 import EmojiConverter
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 import Regex
 
 
@@ -58,39 +58,39 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text (translateText model) ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text (translateText model) ]
             ]
         ]
 
diff --git a/Part4.elm b/Part4.elm
index ff32d35..76d0d54 100755
--- a/Part4.elm
+++ b/Part4.elm
@@ -2,9 +2,9 @@ module Part4 exposing (Model, Msg(..), defaultKey, init, main, translateText, up
 
 import Browser
 import EmojiConverter
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -62,55 +62,55 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.div
-                [ Html.Attributes.class "switch center" ]
-                [ Html.label
+            , div
+                [ class "switch center" ]
+                [ label
                     []
-                    [ Html.text "Translate Text"
-                    , Html.input
-                        [ Html.Attributes.type_ "checkbox"
-                        , Html.Events.onClick ToggleDirection
+                    [ text "Translate Text"
+                    , input
+                        [ type_ "checkbox"
+                        , onClick ToggleDirection
                         ]
                         []
-                    , Html.span
-                        [ Html.Attributes.class "lever" ]
+                    , span
+                        [ class "lever" ]
                         []
-                    , Html.text "Translate Emoji"
+                    , text "Translate Emoji"
                     ]
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text (translateText model) ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text (translateText model) ]
             ]
         ]
 
diff --git a/Part5.elm b/Part5.elm
index dfdc646..eb14d36 100755
--- a/Part5.elm
+++ b/Part5.elm
@@ -2,9 +2,9 @@ module Part5 exposing (Direction(..), Model, Msg(..), defaultKey, init, main, tr
 
 import Browser
 import EmojiConverter
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -75,55 +75,55 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.div
-                [ Html.Attributes.class "switch center" ]
-                [ Html.label
+            , div
+                [ class "switch center" ]
+                [ label
                     []
-                    [ Html.text "Translate Text"
-                    , Html.input
-                        [ Html.Attributes.type_ "checkbox"
-                        , Html.Events.onClick ToggleDirection
+                    [ text "Translate Text"
+                    , input
+                        [ type_ "checkbox"
+                        , onClick ToggleDirection
                         ]
                         []
-                    , Html.span
-                        [ Html.Attributes.class "lever" ]
+                    , span
+                        [ class "lever" ]
                         []
-                    , Html.text "Translate Emoji"
+                    , text "Translate Emoji"
                     ]
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text (translateText model) ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text (translateText model) ]
             ]
         ]
 
diff --git a/Part6.elm b/Part6.elm
index cd0548f..585e220 100755
--- a/Part6.elm
+++ b/Part6.elm
@@ -2,9 +2,9 @@ module Part6 exposing (Direction(..), Model, Msg(..), defaultKey, init, main, re
 
 import Browser
 import EmojiConverter
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -75,64 +75,64 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.div
-                [ Html.Attributes.class "switch center" ]
-                [ Html.label
+            , div
+                [ class "switch center" ]
+                [ label
                     []
-                    [ Html.text "Translate Text"
-                    , Html.input
-                        [ Html.Attributes.type_ "checkbox"
-                        , Html.Events.onClick ToggleDirection
+                    [ text "Translate Text"
+                    , input
+                        [ type_ "checkbox"
+                        , onClick ToggleDirection
                         ]
                         []
-                    , Html.span
-                        [ Html.Attributes.class "lever" ]
+                    , span
+                        [ class "lever" ]
                         []
-                    , Html.text "Translate Emoji"
+                    , text "Translate Emoji"
                     ]
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text (translateText model) ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text (translateText model) ]
             ]
-        , Html.div
-            [ Html.Attributes.class "divider" ]
+        , div
+            [ class "divider" ]
             []
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.h4
-                [ Html.Attributes.class "center" ]
-                [ Html.text "Select Your Key" ]
+        , section
+            [ class "container" ]
+            [ h4
+                [ class "center" ]
+                [ text "Select Your Key" ]
             , renderKeys
             ]
         ]
@@ -148,22 +148,22 @@ translateText model =
             EmojiConverter.emojiToText defaultKey model.currentText
 
 
-renderKeys : Html.Html Msg
+renderKeys : Html Msg
 renderKeys =
-    Html.div
-        [ Html.Attributes.class "row" ]
+    div
+        [ class "row" ]
         (List.map (\emoji -> renderKey emoji) EmojiConverter.supportedEmojis)
 
 
-renderKey : String -> Html.Html Msg
+renderKey : String -> Html Msg
 renderKey emoji =
-    Html.div
-        [ Html.Attributes.class "col s2 m1 emoji-size" ]
-        [ Html.div
-            [ Html.Attributes.classList
+    div
+        [ class "col s2 m1 emoji-size" ]
+        [ div
+            [ classList
                 [ ( "key-selector", True )
                 , ( "is-selected", emoji == defaultKey )
                 ]
             ]
-            [ Html.text emoji ]
+            [ text emoji ]
         ]
diff --git a/Part7.elm b/Part7.elm
index 6a93cbd..eb4bd98 100755
--- a/Part7.elm
+++ b/Part7.elm
@@ -2,9 +2,9 @@ module Part7 exposing (Direction(..), Model, Msg(..), defaultKey, init, main, re
 
 import Browser
 import EmojiConverter
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -81,64 +81,64 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.div
-                [ Html.Attributes.class "switch center" ]
-                [ Html.label
+            , div
+                [ class "switch center" ]
+                [ label
                     []
-                    [ Html.text "Translate Text"
-                    , Html.input
-                        [ Html.Attributes.type_ "checkbox"
-                        , Html.Events.onClick ToggleDirection
+                    [ text "Translate Text"
+                    , input
+                        [ type_ "checkbox"
+                        , onClick ToggleDirection
                         ]
                         []
-                    , Html.span
-                        [ Html.Attributes.class "lever" ]
+                    , span
+                        [ class "lever" ]
                         []
-                    , Html.text "Translate Emoji"
+                    , text "Translate Emoji"
                     ]
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text (translateText model) ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text (translateText model) ]
             ]
-        , Html.div
-            [ Html.Attributes.class "divider" ]
+        , div
+            [ class "divider" ]
             []
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.h4
-                [ Html.Attributes.class "center" ]
-                [ Html.text "Select Your Key" ]
+        , section
+            [ class "container" ]
+            [ h4
+                [ class "center" ]
+                [ text "Select Your Key" ]
             , renderKeys
             ]
         ]
@@ -154,23 +154,23 @@ translateText model =
             EmojiConverter.emojiToText defaultKey model.currentText
 
 
-renderKeys : Html.Html Msg
+renderKeys : Html Msg
 renderKeys =
-    Html.div
-        [ Html.Attributes.class "row" ]
+    div
+        [ class "row" ]
         (List.map (\emoji -> renderKey emoji) EmojiConverter.supportedEmojis)
 
 
-renderKey : String -> Html.Html Msg
+renderKey : String -> Html Msg
 renderKey emoji =
-    Html.div
-        [ Html.Attributes.class "col s2 m1 emoji-size" ]
-        [ Html.div
-            [ Html.Attributes.classList
+    div
+        [ class "col s2 m1 emoji-size" ]
+        [ div
+            [ classList
                 [ ( "key-selector", True )
                 , ( "is-selected", emoji == defaultKey )
                 ]
-            , Html.Events.onClick (SetSelectedKey emoji)
+            , onClick (SetSelectedKey emoji)
             ]
-            [ Html.text emoji ]
+            [ text emoji ]
         ]
diff --git a/Part8.elm b/Part8.elm
index 6d7f3a1..e949b99 100755
--- a/Part8.elm
+++ b/Part8.elm
@@ -2,9 +2,9 @@ module Part8 exposing (Direction(..), Model, Msg(..), defaultKey, init, main, re
 
 import Browser
 import EmojiConverter
-import Html
-import Html.Attributes
-import Html.Events
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 
 
 
@@ -81,64 +81,64 @@ update msg model =
 -- VIEW
 
 
-view : Model -> Html.Html Msg
+view : Model -> Html Msg
 view model =
-    Html.div
+    div
         []
-        [ Html.node "link"
-            [ Html.Attributes.rel "stylesheet"
-            , Html.Attributes.href "stylesheets/main.css"
+        [ node "link"
+            [ rel "stylesheet"
+            , href "stylesheets/main.css"
             ]
             []
-        , Html.nav
+        , nav
             []
-            [ Html.div
-                [ Html.Attributes.class "nav-wrapper light-blue lighten-2" ]
-                [ Html.div
-                    [ Html.Attributes.class "brand-logo center" ]
-                    [ Html.text "Elmoji Translator" ]
+            [ div
+                [ class "nav-wrapper light-blue lighten-2" ]
+                [ div
+                    [ class "brand-logo center" ]
+                    [ text "Elmoji Translator" ]
                 ]
             ]
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.div
-                [ Html.Attributes.class "input-field" ]
-                [ Html.input
-                    [ Html.Attributes.type_ "text"
-                    , Html.Attributes.class "center"
-                    , Html.Attributes.placeholder "Let's Translate!"
-                    , Html.Events.onInput SetCurrentText
+        , section
+            [ class "container" ]
+            [ div
+                [ class "input-field" ]
+                [ input
+                    [ type_ "text"
+                    , class "center"
+                    , placeholder "Let's Translate!"
+                    , onInput SetCurrentText
                     ]
                     []
                 ]
-            , Html.div
-                [ Html.Attributes.class "switch center" ]
-                [ Html.label
+            , div
+                [ class "switch center" ]
+                [ label
                     []
-                    [ Html.text "Translate Text"
-                    , Html.input
-                        [ Html.Attributes.type_ "checkbox"
-                        , Html.Events.onClick ToggleDirection
+                    [ text "Translate Text"
+                    , input
+                        [ type_ "checkbox"
+                        , onClick ToggleDirection
                         ]
                         []
-                    , Html.span
-                        [ Html.Attributes.class "lever" ]
+                    , span
+                        [ class "lever" ]
                         []
-                    , Html.text "Translate Emoji"
+                    , text "Translate Emoji"
                     ]
                 ]
-            , Html.p
-                [ Html.Attributes.class "center output-text emoji-size" ]
-                [ Html.text (translateText model) ]
+            , p
+                [ class "center output-text emoji-size" ]
+                [ text (translateText model) ]
             ]
-        , Html.div
-            [ Html.Attributes.class "divider" ]
+        , div
+            [ class "divider" ]
             []
-        , Html.section
-            [ Html.Attributes.class "container" ]
-            [ Html.h4
-                [ Html.Attributes.class "center" ]
-                [ Html.text "Select Your Key" ]
+        , section
+            [ class "container" ]
+            [ h4
+                [ class "center" ]
+                [ text "Select Your Key" ]
             , renderKeys model
             ]
         ]
@@ -154,23 +154,23 @@ translateText model =
             EmojiConverter.emojiToText model.selectedKey model.currentText
 
 
-renderKeys : Model -> Html.Html Msg
+renderKeys : Model -> Html Msg
 renderKeys model =
-    Html.div
-        [ Html.Attributes.class "row" ]
+    div
+        [ class "row" ]
         (List.map (\emoji -> renderKey model emoji) EmojiConverter.supportedEmojis)
 
 
-renderKey : Model -> String -> Html.Html Msg
+renderKey : Model -> String -> Html Msg
 renderKey model emoji =
-    Html.div
-        [ Html.Attributes.class "col s2 m1 emoji-size" ]
-        [ Html.div
-            [ Html.Attributes.classList
+    div
+        [ class "col s2 m1 emoji-size" ]
+        [ div
+            [ classList
                 [ ( "key-selector", True )
                 , ( "is-selected", emoji == model.selectedKey )
                 ]
-            , Html.Events.onClick (SetSelectedKey emoji)
+            , onClick (SetSelectedKey emoji)
             ]
-            [ Html.text emoji ]
+            [ text emoji ]
         ]