Simple ecommerce and shopping cart written in Elm

Repository

https://github.com/lucamug/elm-ecommerce-cart-test

Installation

Clone the repo, run `npm install` and `npm run dev` and accept elm-package's prompt in the cli. Changes to your styles and elm modules under the `src` directory will auto-transpile to css and js respectively.

Based on https://github.com/xavierelopez/elm-cart-example

Elm flow in the console

Try this code if you want to see how elm behave in the console:

https://ellie-app.com/Mw5GTWMbjxa1/0

	module Main exposing (..)
	import Html exposing (..)
	import Html.Attributes exposing (..)
	import Html.Events exposing (onInput)
	-- import Debug exposing (..)
	main =
	Html.beginnerProgram
	{ model = model
	, view = view
	, update = update
	}
	-- MODEL
	type alias Model =
	{ name : String
	, password : String
	, passwordAgain : String
	}
	model : Model
	model =
	Model "" "" ""
	-- UPDATE
	type Msg
	= Name String
	| Password String
	| PasswordAgain String
	update : Msg -> Model -> Model
	update msg model =
	let
	_ = Debug.log "msg" msg
	_ = Debug.log "model before update" model
	in
	case msg of
	Name name ->
	{ model | name = name }
	Password password ->
	{ model | password = password }
	PasswordAgain password ->
	{ model | passwordAgain = password }
	-- VIEW
	view : Model -> Html Msg
	view model =
	let
	_ = Debug.log "model to view" model
	in
	div []
	[ input [ type_ "text", placeholder "Name", onInput Name ] []
	, input [ type_ "password", placeholder "Password", onInput Password ] []
	, input [ type_ "password", placeholder "Re-enter Password", onInput PasswordAgain ] []
	, viewValidation model
	]
	viewValidation : Model -> Html msg
	viewValidation model =
	let
	(color, message) =
	if model.password == model.passwordAgain then
	("green", "OK")
	else
	("red", "Passwords do not match!")
	in
	div [ style [("color", color)] ] [ text message ]

view raw main.elm hosted with ❤ by GitHub

Resources about elm, the programming language

• http://elm-lang.org/assets/blog/0.18/todomvc.html#/active todos with debugger
• http://elm-lang.org/blog Official elm blog
• http://elm-lang.org/blog/blazing-fast-html-round-two elm performances
• http://elm-lang.org/blog/farewell-to-frp Making signals unnecessary with The Elm Architecture
• http://elmprogramming.com/ Beginners elm guide
• http://elmrepl.cuberoot.in/ An online repl (Read–Eval–Print Loop) for elm
• http://faq.elm-community.org/ FAQ elm
• http://krisajenkins.github.io/elm-rays/ A raycasting hack in elm based on http://ncase.me/sight-and-light/
• http://ohanhi.com/base-for-game-elm-017.html Revisiting the "hard way": Base for a game in Elm 0.17
• http://vincent.jousse.org/en/tech/interacting-with-dom-element-using-elm-audio-video/
• https://auth0.com/blog/creating-your-first-elm-app-part-1/
• https://ellie-app.com/new Ellie is the Elm platform in your browser.
• https://gist.github.com/staltz/868e7e9bc2a7b8c1f754 The introduction to Reactive Programming you've been missing
• https://github.com/Bogdanp/elm-route/tree/4.0.0 elm-route
• https://github.com/evancz/elm-html-and-js This project illustrates how to embed an Elm program in an HTML page and how to communicate with JavaScript.
• https://github.com/sporto/elm-tutorial-app An example SPA in Elm
• https://guide.elm-lang.org/interop/javascript.html#customs-and-border-protection JavaScript Interop
• https://learnxinyminutes.com/docs/elm/
• https://mbylstra.github.io/html-to-elm/ Convert html to elm
• https://medium.com/@rgoomar/why-i-think-elm-is-the-future-of-front-end-development-21e9b091fa05#.nc4hzrmhn
• https://medium.com/the-ahead-story/move-fast-and-dont-break-things-running-a-startup-on-elm-b5491082fe8b#.yx8hr7utl
• https://www.elm-tutorial.org/en/ elm tutorial
• https://www.youtube.com/channel/UCOpGiN9AkczVjlpGDaBwQrQ elm-conf channel
• https://www.youtube.com/watch?v=EDp6UmaA9CM Toward a Better Front End Architecture: Elm - Codemash 2017