Add HelloJs and GroceriesJs

README.md

@@ -112,9 +112,11 @@ Running a web-compatible recipe:
 |   | :heavy_check_mark: | [FindDomElementJs](recipes/FindDomElementJs) | This recipe shows how to find elements in the DOM by using query selectors. |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/FormsReactHooks/src/Main.purs)) | [FormsReactHooks](recipes/FormsReactHooks) | A React port of the ["User Interface - Forms" Elm Example](https://elm-lang.org/examples/forms). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/GroceriesHalogenHooks/src/Main.purs)) | [GroceriesHalogenHooks](recipes/GroceriesHalogenHooks) | A Halogen port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples/groceries). |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/GroceriesJs/src/Main.purs)) | [GroceriesJs](recipes/GroceriesJs) | A framework-free port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples/groceries). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/GroceriesReactHooks/src/Main.purs)) | [GroceriesReactHooks](recipes/GroceriesReactHooks) | A React port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples/groceries). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/HelloConcur/src/Main.purs) - [fixme](recipes/HelloConcur/tryFixMe.md)) | [HelloConcur](recipes/HelloConcur) | A Concur port of the ["HTML - Hello" Elm Example](https://elm-lang.org/examples/hello). |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/HelloHalogenHooks/src/Main.purs)) | [HelloHalogenHooks](recipes/HelloHalogenHooks) | A Halogen port of the ["HTML - Hello" Elm Example](https://elm-lang.org/examples/hello). |
+|   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/HelloJs/src/Main.purs)) | [HelloJs](recipes/HelloJs) | A framework-free port of the ["HTML - Hello" Elm Example](https://elm-lang.org/examples/hello). |
 | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/HelloLog/src/Main.purs)) | [HelloLog](recipes/HelloLog) | This recipe shows how to run a simple "Hello world!" program in either the node.js or web browser console. |
 |   | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/HelloReactHooks/src/Main.purs)) | [HelloReactHooks](recipes/HelloReactHooks) | A React port of the ["HTML - Hello" Elm Example](https://elm-lang.org/examples/hello). |
 | :heavy_check_mark: | :heavy_check_mark: ([try](https://try.ps.ai/?github=JordanMartinez/purescript-cookbook/master/recipes/HeterogenousArrayLog/src/Main.purs)) | [HeterogenousArrayLog](recipes/HeterogenousArrayLog) | This recipe demonstrates how to create a heterogenous array and process its elements. |

recipes/GroceriesJs/.gitignore

@@ -0,0 +1,13 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago
+/web-dist/
+/prod-dist/
+/prod/

recipes/GroceriesJs/README.md

@@ -0,0 +1,11 @@
+# GroceriesJs
+
+A framework-free port of the ["HTML - Groceries" Elm Example](https://elm-lang.org/examples/groceries).
+
+Note that this example involves some lower-level DOM manipulation, so it's generally preferred to use a framework instead.
+
+## Expected Behavior:
+
+### Browser
+
+The browser will display a header of text and an unordered list of grocery items.

recipes/GroceriesJs/spago.dhall

@@ -0,0 +1,6 @@
+{ name = "GroceriesJs"
+, dependencies =
+  [ "console", "effect", "psci-support", "web-html" ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/GroceriesJs/src/**/*.purs" ]
+}

recipes/GroceriesJs/src/Main.purs

@@ -0,0 +1,64 @@
+module GroceriesJs.Main where
+
+import Prelude
+import Data.Foldable (traverse_)
+import Data.Maybe (maybe)
+import Effect (Effect)
+import Effect.Exception (throw)
+import Web.DOM (Document, Node)
+import Web.DOM.Document (createElement)
+import Web.DOM.Element as Element
+import Web.DOM.Node (appendChild, setTextContent)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument as HTMLDocument
+import Web.HTML.HTMLElement as HTMLElement
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  htmlDoc <- document =<< window
+  body <- maybe (throw "Could not find body element") pure =<< HTMLDocument.body htmlDoc
+  let
+    doc = HTMLDocument.toDocument htmlDoc
+
+  -- Create DOM elements
+  divElem <- createElement "div" doc
+  h1Elem <- createElement "h1" doc
+  ulElem <- createElement "ul" doc
+
+  -- Convert DOM (or HTML) elements to DOM nodes
+  let
+    bodyNode = HTMLElement.toNode body
+    divNode = Element.toNode divElem
+    h1Node = Element.toNode h1Elem
+    ulNode = Element.toNode ulElem
+
+  -- Fill in some contents
+  setTextContent "My Grocery List" h1Node
+
+  -- Define structure in DOM
+  void $ appendChild divNode bodyNode
+  void $ appendChild h1Node divNode
+  void $ appendChild ulNode divNode
+  traverse_ (makeAndAppendLiNode doc ulNode) groceryList
+
+makeAndAppendLiNode :: Document -> Node -> String -> Effect Node
+makeAndAppendLiNode doc parentNode text = do
+  liElem <- createElement "li" doc
+  let
+    liNode = Element.toNode liElem
+  setTextContent text liNode
+  appendChild liNode parentNode
+
+groceryList :: Array String
+groceryList =
+  [ "Black Beans"
+  , "Limes"
+  , "Greek Yogurt"
+  , "Cilantro"
+  , "Honey"
+  , "Sweet Potatoes"
+  , "Cumin"
+  , "Chili Powder"
+  , "Quinoa"
+  ]

recipes/GroceriesJs/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>GroceriesJs</title>
+</head>
+
+<body>
+  <script src="./index.js"></script>
+</body>
+
+</html>

recipes/GroceriesJs/web/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/GroceriesJs.Main/index.js").main();

recipes/HelloJs/.gitignore

@@ -0,0 +1,13 @@
+/bower_components/
+/node_modules/
+/.pulp-cache/
+/output/
+/generated-docs/
+/.psc-package/
+/.psc*
+/.purs*
+/.psa*
+/.spago
+/web-dist/
+/prod-dist/
+/prod/

recipes/HelloJs/README.md

@@ -0,0 +1,11 @@
+# HelloJs
+
+A framework-free port of the ["HTML - Hello" Elm Example](https://elm-lang.org/examples/hello).
+
+See [GroceriesJs](../GroceriesJS) for a more elaborate example of rendering HTML without a framework.
+
+## Expected Behavior:
+
+### Browser
+
+The browser will display "Hello!" as an HTML element.

recipes/HelloJs/spago.dhall

@@ -0,0 +1,6 @@
+{ name = "HelloJs"
+, dependencies =
+  [ "console", "effect", "psci-support", "web-html" ]
+, packages = ../../packages.dhall
+, sources = [ "recipes/HelloJs/src/**/*.purs" ]
+}

recipes/HelloJs/src/Main.purs

@@ -0,0 +1,19 @@
+module HelloJs.Main where
+
+import Prelude
+import Data.Maybe (maybe)
+import Effect (Effect)
+import Effect.Exception (throw)
+import Web.DOM.Node (setTextContent)
+import Web.HTML (window)
+import Web.HTML.HTMLDocument as HTMLDocument
+import Web.HTML.HTMLElement as HTMLElement
+import Web.HTML.Window (document)
+
+main :: Effect Unit
+main = do
+  doc <- document =<< window
+  body <- maybe (throw "Could not find body element") pure =<< HTMLDocument.body doc
+  let
+    bodyNode = HTMLElement.toNode body
+  setTextContent "Hello!" bodyNode

recipes/HelloJs/web/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>HelloJs</title>
+</head>
+
+<body>
+  <script src="./index.js"></script>
+</body>
+
+</html>

recipes/HelloJs/web/index.js

@@ -0,0 +1,2 @@
+"use strict";
+require("../../../output/HelloJs.Main/index.js").main();